当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Dom事件探秘

Dom事件探秘

2018年08月23日  | 移动技术网IT编程  | 我要评论

  • time: 2016-01-19 17:30

    一.理解事件流

    1.含义：

        描述的是从页面中接受事件的顺序.

    2. 事件冒泡

        描述事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。（ie,chrom,火狐等大部分浏览器使用）

    3.事件捕获

        描述事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。（netscape的事件流是事件捕获流）

二.使用事件处理程序

1.html事件处理程序

    在html结构中直接写入事件处理程序，缺点时html和js耦合太紧密，很难修改。

<input type="button" value="按钮" id="btn" onclick="alert('hello')">

2.dom0级事件处理程序

    方法：函数赋值 element.onclick=function()（只能为一个元素添加一个事件处理函数）

 var btn2=document.getelementbyid('btn2');
 btn2.onclick=function(){
    alert('这是通过dom0级添加的事件！');
 }

3.dom2级事件处理程序

 var btn3=document.getelementbyid('btn3');

 btn3.addeventlistener('click',showmes,false);
 btn3.removeeventlistener('click',showmes,false);
  • element.addeventliistener()：添加事件，必须用removeeventlistener删除
  • element.removeeventlistener()：删除事件，参数必须与addeventlistener  相同
  • 上述两个方法接受3个参数：要处理的事件类型（不加on），作为事件处理程序的函数和布尔值
  • dom0hedom2可以在一个节点元素上添加多个事件

4.ie事件处理程序

  • element.attachevent()：添加事件
  • element.detachevent()：删除事件
  • 接受两个参数：要处理的事件类型type（要加on）和事件处理程序函数，不使用布尔值是因为ie8及更早的版本只支持实事件冒泡（语法注意： .等价于［］）

前四种事件处理程序代码截图如下：

dom1

5.跨浏览器的的事件处理程序

  • 把能力测试函数封装到单独的变量对象中（可以单独存在一个文件中留以后备用）
    dom2

三.事件对象

1.dom 中事件对象

  • .type属性：获取事件属性
  • .target属性：获取事件目标
  • .stoppropagation()方法用于阻止事件冒泡
  • .preventdefault()方法阻止默认行为

2.ie中的事件对象

  • .type属性：获取事件属性
  • .srcelement属性:获取事件目标
  • .cancelbubble属性:用于阻止事件冒泡，true表示阻止冒泡，false不阻止冒泡表示
  • .returnvalue 属性：用于阻止事件的默认行为，设置false表示阻止事件的默认行为

dom3

3.浏览器兼容问题

  • 根据能力判断将函数封装到单独的变量中(类似上一节二.5)
4.dom事件思维导图笔记

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网