javascript事件处理

最新推荐文章于 2024-04-25 20:29:33 发布

Always0nTheWay

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量601

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/wukai_std/article/details/53248539

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

JS事件添加的兼容性问题

事件是javascript和HTML交互基础,任何文档或浏览器窗口发生的交互,都要通过绑定事件方法进行交互.

DOM0级,DOM2级,IE事件处理

DOM0级事件

DOM0级事件是直接为HTML元素添加事件处理属性,例如为input添加点击事件

可以

<input id="b1" type="button" onclick="alert('hello')" value="点击">

或者

<input id="b1" type="button" value="点击">
<script>
    document.getElementById("b1").onclick = function() {
        alert("hello world");
    }
</script>

若想清除事件则设置event为空

!注意:DOM0级事件是可以被覆盖的,因为他被当作一个方法处理,对这个方法的重新赋值是会覆盖的

DOM2级事件

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。

DOM2级事件处理

<div id="ggpar">
    <div id="gpar">
        <div id="par">
            <input id="b1" type="button" name="in1" value="点击">
        </div>
    </div>
</div>
<script type="text/javascript">
    var b1 = document.getElementById('b1');
    var par = document.getElementById('par');
    var gpar = document.getElementById('gpar');
    var ggpar = document.getElementById('ggpar');
    ggpar.addEventListener("click",function(event) {
        alert("ggdiv");
    },false)
    gpar.addEventListener("click",function(event) {
        alert("gdiv");
    },true)
    par.addEventListener("click",function(event) {
        alert("div");
    },false)
    b1.addEventListener("click",function(event) {
        alert("input");
    },true)
</script>

<div id="ggpar">
    <div id="gpar">
        <div id="par">
            <input id="b1" type="button" name="in1" value="点击">
        </div>
    </div>
</div>
<script type="text/javascript">
    var b1 = document.getElementById('b1');
    var par = document.getElementById('par');
    var gpar = document.getElementById('gpar');
    var ggpar = document.getElementById('ggpar');
    ggpar.addEventListener("click",function(event) {
        alert("ggdiv");
    },true)
    gpar.addEventListener("click",function(event) {
        alert("gdiv");
    },false)
    par.addEventListener("click",function(event) {
        alert("div");
    },true)
    b1.addEventListener("click",function(event) {
        alert("input");
    },false)
</script>

DOM2级事件的注册监听函数有三个参数,第一个为string类型的参数代表监听的事件类型(没有on前缀),第二个function类型表示事件触发执行的函数,第三个boolean类型的参数useCapture表示是否采用捕获方式(从外层元素向内层元素传递,捕获方式刚好相反)传递事件,默认为false,事件句柄在冒泡阶段执行.
由上述例子及对这例子的一些改动可知,事件监听机制会对所有注册事件执行两次轮询,第一次由外向内,第二次由内向外,第一次轮询(捕获阶段)依次触发第三个参数useCapture为true的事件,第二次轮询(冒泡阶段)依次触发第三个参数为false的事件
DOM2级事件的监听注销函数

obj.removeEventListener(eventName,functionName,useCapture)

!注意第三个参数的意思:事件可以分别注册捕获阶段和冒泡阶段,并且二者互不干扰(因为轮询两次)

DOM2级事件中的event对象

<div>
    <input id="b1" type="button" name="in1" value="点击">
    <a id="b2" href="http://www.baidu.com">百度一下</a>
<div>

<script type="text/javascript">

    var b1 = document.getElementById('b1');
    var b2 = document.getElementById('b2');

    b2.addEventListener("click",function(event) {
    // 阻止该元素在浏览器默认行为,例如a链接跳转,submit表单提交
    event.preventDefault();
    this.style.color = "red";
    })

    b1.addEventListener("click",function(event) {
    // 发生事件类型
    console.log(event.type);
    // 发生事件的节点
    console.log(event.target);
    // 正在处理事件的节点
    console.log(event.currentTarget);
    // 阻止事件传递(捕获和冒泡)
    // event.stopPropagation();


    // 相对于浏览器窗口的x，y坐标
    console.log(event.clientX);
    console.log(event.clientY);
    // 相对于屏幕的x，y坐标
    console.log(event.screenX);
    console.log(event.screenY);
    },true)
</script>

IE事件

事件处理

<input id="b1" type="button" value="点击">

<script>
    var b1 = document.getElementById("b1");
    var func = function() {
        alert("IE");
    }
    // 注意此处有"on"前缀
    b1.attachEvent("onclick",func);
    // 删除事件
    // b1.detachEvent("onclick",func);
</script>

IE事件模型没有capturing阶段所以调用attachEvent相当于调用addEvetnListener且第三个参数为false

IE中的Event对象

Event对象不是传递给事件监听函数，而是通过window对象的event属性访问Event对象.
IE Event对象常用属性
type:
```
兼容DOM的type属性
```
srcElement: 　　　　　　

兼容DOM的target属性
clientX, clientY:

兼容DOM的clientX, clientY属性
cancelBubble:
布尔值，设为true同调用stopPropagation()
returnValue:
布尔值，设为false同调用preventDefault()

简单的事件兼容性编程:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>简单的通用事件侦听函数</title>
  </head>
  <script type="text/javascript">
    window.onload = function() {
      var test1 = function() {
        console.log("test1");
      }
      var test2 = function() {
        console.log("test2");
      }

      var addEvent = function(elem,event,fn) {
        if(elem.addEventListener) {
          elem.addEventListener(event,fn);
        } else if(elem.attachEvent) {
          elem.attachEvent('on' + e,fn);
        } else {
          elem["on" + event] = fn;
        }
      }

      var removeEvent = function(elem,event,fn) {
        if(elem.addEventListener) {
          elem.removeEventListener(event,fn);
        } else if(elem.detachEvent) {
          elem.detachEvent("on" + event,fn);
        } else {
          elem["on" + event] = null;
        }
      }

      var fn1 = function() {
        console.log("hello");
      }

      var b1 = document.getElementById('b1');
      var b2 = document.getElementById('b2');
      b1.style.cssText = "width: 100px;height: 100px;background-color: aqua";
      b2.style.cssText = "width: 100px;height: 100px;background-color: orange";
      addEvent(b1,"click",fn1);
      addEvent(b2,"click",fn1);
      // 移除b2事件,但b1添加的事件未被移除
      removeEvent(b2,"click",fn1);
    }
  </script>
  <body>

    <div id="b1">
    </div>
    <div id="b2">
    </div>

  </body>
</html>

Always0nTheWay

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript事件处理

JS事件添加的兼容性问题事件是javascript和HTML交互基础,任何文档或浏览器窗口发生的交互,都要通过绑定事件方法进行交互.DOM0级,DOM2级,IE事件处理DOM0级事件DOM0级事件是直接为HTML元素添加事件处理属性,例如为input添加点击事件可以<input id="b1" type="button" onclick="alert('hello')" value="点击">或
复制链接

扫一扫