>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 20976 个阅读者 刷新本主题
 * 贴子主题:  JavaScript 的事件监听器EventListener 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2019-08-18 20:40:26     消息  查看  搜索  好友  邮件  复制  引用

  

JavaScript  HTML DOM EventListener

  addEventListener() 方法

范例

        在用户点击按钮时触发监听事件:

        document.getElementById("myBtn").addEventListener("click", displayDate);

         addEventListener() 方法用于向指定元素添加事件句柄。

        addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

        你可以向一个元素添加多个事件句柄。

        你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。

        你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。

        addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。

        当你使用 addEventListener() 方法时,  JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。

        你可以使用 removeEventListener() 方法来移除事件的监听。        

语法

      element.addEventListener(event, function, useCapture);

      第一个参数是事件的类型 (如 "click" 或 "mousedown").

      第二个参数是事件触发后调用的函数。

      第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

    
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小 注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
        

向原元素添加事件句柄

范例

        当用户点击元素时弹出 "Hello World!" :

        element.addEventListener("click", function(){ alert("Hello World!"); });

       你可以使用函数名,来引用外部函数:      

范例

      当用户点击元素时弹出 "Hello World!" :

       element.addEventListener("click", myFunction);

       function myFunction() {
              alert ("Hello World!");
       }      

向同一个元素中添加多个事件句柄

     addEventListener() 方法允许向同一个元素添加多个事件,且不会覆盖已存在的事件:    

范例

     element.addEventListener("click", myFunction);
     element.addEventListener("click", mySecondFunction);

     你可以向同个元素添加不同类型的事件:    

范例

      element.addEventListener("mouseover", myFunction);
      element.addEventListener("click", mySecondFunction);
      element.addEventListener("mouseout", myThirdFunction);    

向 Window 对象添加事件句柄

   addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素,  HTML 文档,  window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。    

范例

    当用户重置窗口大小时添加事件监听:

      window.addEventListener("resize", function(){
       document.getElementById("demo").innerHTML = sometext;
    });    

传递参数

     当传递参数值时,使用"匿名函数"调用带参数的函数:    

范例

     element.addEventListener("click", function(){ myFunction(p1, p2); });    

事件冒泡或事件捕获?

     事件传递有两种方式:冒泡与捕获。

    事件传递定义了元素事件触发的顺序。

    如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

    在  冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即:

    <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

    在  捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发

,然后再触发 <p> 元素的点击事件。

     addEventListener() 方法可以指定 "useCapture"  参数来设置传递类型:

     addEventListener(event, function,  useCapture);

     默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。      

范例

      document.getElementById("myDiv").addEventListener("click", myFunction, true);      

  removeEventListener() 方法

      removeEventListener() 方法移除由  addEventListener() 方法添加的事件句柄:    

范例

     element.removeEventListener("mousemove", myFunction);    

浏览器支持

     表格中的数字表示支持该方法的第一个浏览器的版本号。

    
方法
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0


     注意: IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener()

方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);      

范例

     跨浏览器解决方法:


var x = document.getElementById("myBtn");
if (x.addEventListener) {
  // 所有主流浏览器,除了 IE 8 及更早版本
  x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
  // IE 8 及更早版本
  x.attachEvent("onclick", myFunction);
}

程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-14 08:30:21 重新编辑]
  Java面向对象编程-->Java语言的基本语法和规范
  JavaWeb开发-->Servlet技术详解(Ⅰ)
  JSP与Hibernate开发-->映射对象标识符
  Java网络编程-->安全网络通信
  精通Spring-->Vue指令
  Vue3开发-->Vue指令
  10个 Web 开发人员的常用的 Chrome 扩展程序
  10个开发者经常问的JavaScript面试题(附答案解析)
  好消息:《精通Vue.js:Web前端开发技术详解》出版了!
  javaScript中"=="和"==="运算符的区别
  Vue项目PWA化
  javaScript中==和===的区别详解
  JavaScript的async函数
  vue+file-saver+jszip实现批量导出图片
  Vue. 入门篇
  H5定位终极解决方案
  AJAX获取服务器响应
  JavaScript的HTML DOM Track 对象
  JavaScript的HTML DOM MenuItem 对象
  CSS 单位
  HTML 区块:div和span元素
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。