001-DOM事件

孙吉亮发布于2019-08-29 13:01 / 3005人阅读

摘要：决定还是继续写博客，记录工作学习中遇到的问题，每天晚上对学习和遇到的问题进行总结。

决定还是继续写博客，记录工作学习中遇到的问题，每天晚上对学习和遇到的问题进行总结。

1.DOM事件

1.HTML事件处理程序
2.DOM的0级事件（把一个函数函数赋值给一个事件处理程序属性）element.onclick(function(){})
3.DOM的二级事件(element.addEventListener(type,fn,false),（false添加到冒泡阶段）、
element.attachEvent(type,fn,false))

2.封装一个对象兼容各种浏览器

    var EventUtil = {
        addEvent: function (element, type, fn) {
            if (element.addEventListener) {
                element.addEventListener(type, fn, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, fn);  //兼容IE
            } else { 
                element["on" + type] = fn;      //DOM的0级
            }
        },

        removeEvent: function (element, type, fn) {
            if (element.removeEventListener) {
                element.removeEventListener(type, fn, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, fn);
            } else { 
                element["on" + type] = null;
            }
        }
    }

3.小例子

HTML结构

JS代码
我们现在给这个按钮添加事件

//随便写一个函数，假设触发这个按钮的点击事件后，会调用这个函数

    function showMsg(event) {
        alert(event.target.nodeName);  //会把绑定这个事件的标签的名字显示出来
        event.stopPropagation();      //阻止冒泡
        event.preventDefault();       //阻止默认行为
    }
    
    //获取这个按钮
    var btn0 = document.getElementById("btn0");
    //调用上面写的封装的函数绑定事件
    EventUtil.addEvent(btn0, "click", showMsg);

4.总结

主要是回顾了一下DOM事件，后面又做了两个小练习
1.封装事件处理
2.event事件对象

GPU云服务器云服务器单击事件选中事件点击事件删除事件事件 41

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112306.html

001-DOM事件

摘要：决定还是继续写博客，记录工作学习中遇到的问题，每天晚上对学习和遇到的问题进行总结。决定还是继续写博客，记录工作学习中遇到的问题，每天晚上对学习和遇到的问题进行总结。 1.DOM事件 1.HTML事件处理程序2.DOM的0级事件（把一个函数函数赋值给一个事件处理程序属性）element.onclick(function(){})3.DOM的二级事件(element.addEventLi...

h9911 2019-08-20 18:20 评论0 收藏0
001-DOM事件

摘要：决定还是继续写博客，记录工作学习中遇到的问题，每天晚上对学习和遇到的问题进行总结。决定还是继续写博客，记录工作学习中遇到的问题，每天晚上对学习和遇到的问题进行总结。 1.DOM事件 1.HTML事件处理程序2.DOM的0级事件（把一个函数函数赋值给一个事件处理程序属性）element.onclick(function(){})3.DOM的二级事件(element.addEventLi...

BDEEFE 2019-08-01 17:15 评论0 收藏0
5、React组件事件详解

摘要：组件事件响应在构建虚拟的同时，还构建了自己的事件系统且所有事件对象和规范保持一致。的事件系统和浏览器事件系统相比，主要增加了两个特性事件代理和事件自动绑定。 React组件事件响应 React在构建虚拟DOM的同时，还构建了自己的事件系统；且所有事件对象和W3C规范保持一致。 React的事件系统和浏览器事件系统相比，主要增加了两个特性：事件代理、和事件自动绑定。 1、事件代理 ...

Ververica 2019-08-22 15:13 评论0 收藏0
详解JS事件 - 事件模型/事件流/事件代理/事件对象/自定义事件

摘要：取消事件的默认行为。阻止事件的派发包括了捕获和冒泡阻止同一个事件的其他监听函数被调用。事件模型 DOM0 级事件模型 -没有事件流，这种方式兼容所有浏览器 // 方式一将事件直接通过属性绑定在元素上 / 方式二获取到页面元素后，通过 onclick 等事件，将触发的方法指定为元素的事件 var btn = document.getElementById(btn) btn....

URLOS 2019-08-23 17:07 评论0 收藏0
[学习笔记] 事件（上篇）

摘要：指定事件处理程序指定事件处理程序主要有两种方式级事件处理程序级事件处理程序。添加事件处理程序注意这里是哦或移除事件处理程序使用移除事件处理程序的条件与方法相同必须提供相同的参数，从而添加的匿名函数也无法被移除。今天看书又看到事件，遂决定小总结一下~ JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器（事件处...

wangym 2019-08-22 10:57 评论0 收藏0