㈠事件流

▶事件：是文档和浏览器窗口中发生的，特定的交互瞬间。

▶事件流：描述的是从页面中接受事件的顺序

 

⑴DOM事件冒泡

定义：事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播至最不具体的那个节点（文档）。

 

具体讲解：

代码：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn">

      </div>

</body>

</html>

说明：点击按钮，浏览器就会认为：你点按钮的同时，也点击了包含这个按钮的这个容器（“div”），那么你点了这个div以后，它又认为你点了整个HTML了，那么你点了整个HTML，它又认为你点了整个document。也就是说：click事件在input上触发，那么它会一级一级往上冒，最后直到冒到document。

 

⑵DOM事件捕获

定义：不太具体的节点应该更早接受到事件，而最具体的节点最后接受到事件。

 

具体讲解：

代码：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn">

      </div>

</body>

</html>

说明：用事件捕获的思想：它认为最先把事件用document接收了，然后让HTML接收了，然后又让body接收，然后又让div接收了，最后才被input接收了。

 

㈡事件处理程序

⑴ HTML事件处理程序

含义：你的事件直接加在HTML结构里

具体解释：

代码：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

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

      </div>

</body>

</html>

说明：直接将onclick事件加在input标签上，而且是在HTML结构里

 

注：并不是所有要执行的JS代码都应该写在这个地方，也可以把它封装在这个函数内

代码：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn" onclick="showMessage()">

      </div>

     <script>

            function showMessage(){

                        alert('hello world!');

              }

     </script>

</body>

</html>

 

HTML事件的缺点：HTML和JS代码紧密的耦合在一起

具体解释：如果要更换事件处理程序，就要修改两个地方：HTML代码和JS函数

 

⑵ DOM0级事件处理程序 

这种方法是一种较为传统的方式：把一个函数赋值给一个事件的处理程序属性

这是用的比较多的方法，原因是简单，跨浏览器的优势

代码示例：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn" onclick="showMes()">

       <input type="button" value="按钮2" id="btn2" >

      </div>

     <script>

            function showMes(){

                        alert('hello world!');

              }

            var btn2=document.getElementById('btn2');   //取得btn2按钮对象

            btn2.onclick=function(){                    //给btn2添加onclick属性

                   alert('这是通过DOM0级添加的事件！')；

             }

             btn2.onclick=null;            //删除onclick属性

     </script>

</body>

</html>

优点：1）没有HTML事件的缺点

           2）可以给一个元素上添加多个事件处理程序，这些事件处理程序会按顺序执行。

 

⑶ DOM2级事件处理程序

①DOM2级事件定义了两个方法：

用于处理指定和删除事件处理程序的操作

addEventListener()  和 removeEventListener()。

②接收三个参数：

1) 要处理的事件名

2) 作为事件处理程序的函数

3) 布尔值(true表示在捕获阶段调用事件处理程序;false表示在冒泡阶段调用事件处理程序)

③代码示例:

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn" onclick="showMes()">

      <input type="button" value="按钮2" id="btn2" >

      <input type="button" value="按钮3" id="btn3" >

      </div>

     <script>

            function showMes(){

                        alert('hello world!');

              }

            var btn2=document.getElementById('btn2');

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

            btn2.onclick=function(){

                   alert('这是通过DOM0级添加的事件！')；

             }

             btn2.onclick=null;

            //DOM2级事件

           btn3.addEventListener('onclick',showMes,false);   //给btn3添加一个事件监听程序   兼容各种浏览器

            //删除事件

           btn3.removeEventListener('onclick',showMes,false);

     </script>

</body>

</html>

 

④优点：可以给一个元素上添加多个事件处理程序，这些事件处理程序会按顺序执行。

代码示例：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn" onclick="showMes()">

      <input type="button" value="按钮2" id="btn2" >

      <input type="button" value="按钮3" id="btn3" >

      </div>

     <script>

            function showMes(){

                        alert('hello world!');

              }

            var btn2=document.getElementById('btn2');

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

            btn2.onclick=function(){

                   alert('这是通过DOM0级添加的事件！')；

             }

             btn2.onclick=null;

            //DOM2级事件

           btn3.addEventListener('onclick',showMes,false);

           btn3.addEventListener('onclick',function(){

             alert(this.value);引用被触发的元素

           },false);

     </script>

</body>

</html>

注意：在IE浏览器中不起作用。

 

⑷IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

②接收相同的两个参数：

事件处理程序的名称和事件处理程序的函数

③不使用第三个参数的原因：IE8及以更早的浏览器版本只支持事件冒泡！

 代码示例：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn" onclick="showMes()">

      <input type="button" value="按钮2" id="btn2" >

      <input type="button" value="按钮3" id="btn3" >

      </div>

     <script>

            function showMes(){

                        alert('hello world!');

              }

            var btn2=document.getElementById('btn2');

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

            btn2.onclick=function(){

                   alert('这是通过DOM0级添加的事件！')；

             }

             btn2.onclick=null;

            //IE事件处理程序

           btn3.attachEvent('onclick',showMes);

           btn3.detachEvent('onclick',showMes);

     </script>

</body>

</html>

 注意：只在IE浏览器和Opera浏览器中使用

 

⑸跨浏览器的事件处理程序

①方法：恰当的使用能力检测

②问题：如何实现跨浏览器解决事件处理程序？

通过将增加和删除封装在一个对象里面，封装了两个方法，每个方法都进行了能力检测，你支持这个方法，就用这个方法，不支持这个方法，就用所支持的方法。

③代码示例：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn" onclick="showMes()">

      <input type="button" value="按钮2" id="btn2" >

      <input type="button" value="按钮3" id="btn3" >

      </div>

     <script>

            function showMes(){

                        alert('hello world!');

              }

            var btn2=document.getElementById('btn2');

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

            btn2.onclick=function(){

                   alert('这是通过DOM0级添加的事件！')；

             }

             btn2.onclick=null;

            //跨浏览器事件处理程序

            vareventUtil={

            //添加句柄

            addHandler:function(element,type,handler){

            if(element.addEventListener){

                element.addEventListener(type,handler,false);

            }else if(element.attachEvent){

                element.attachEvent('on'+type,handler);

            }else{

                element['on'+type]=handler;

            }

          },

          //删除句柄

           removeHandler:function(element,type,handler){

            if(element.removeEventListener){

                element.removeEventListener(type,handler,false);

            }else if(element.detachEvent){

                element.detachEvent('on'+type,handler);

            }else{

                element['on'+type]=null;

            }

          }

        }

        eventUtil.addHandler(btn3,'click',showMes);

        eventUtil.removeHandler(btn3,'click',showMes);

</script>

</body>

</html>

最新文章

  1. AngularJS表达式
  2. JS实战 &#183; 仿css样式选择器
  3. Java程序-进程中的&quot;进程&quot;
  4. [DX11] Introduction
  5. jquery easyui tab加载内容的几种方法
  6. ASP.NET的分页方法（二）
  7. 剑指 offer set 10 栈的压入、弹出序列
  8. [技术翻译]构建现代化的 Objective-C (上)
  9. poj 1001 求高精度幂
  10. POJ 2586：Y2K Accounting Bug（贪心）
  11. es6笔记5^_^set、map、iterator
  12. 【JAVAWEB学习笔记】13_servlet
  13. java围棋游戏源代码
  14. LeetCode(30)-Pascal&#39;s Triangle
  15. python 识别验证码
  16. DDD实践：领域事件
  17. zabbix添加对自定义无规则的关键日志文件的监控
  18. python函数式编程——偏函数
  19. C语言中文件打开模式(r/w/a/r+/w+/a+/rb/wb/ab/rb+/wb+/ab+)浅析
  20. 理解端口与IP

热门文章

  1. Linux操作系统文档
  2. X86逆向11：F12暂停法的妙用
  3. MouseMoveEvent为了不太耗资源在默认状态下是要鼠标按下才能捕捉到。要想鼠标不按下时的移动也能捕捉到，需要setMouseTracking(true)
  4. LeetCode面试常见100题（ TOP 100 Liked Questions）
  5. kafka运维填坑
  6. mysql java jdbc 如何 update select
  7. LeetCode：181.超过经理收入的员工
  8. CSS选择器（通配符选择器、标签选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器和相邻元素选择器）
  9. elementUI使用实录
  10. python 文本相似度计算