首页 热点专区 小学知识 中学知识 出国留学 考研考公
您的当前位置:首页正文

DOM 事件

2024-12-20 来源:要发发知识网

Javascript 和 HTML 的交互,是通过事件实现的。
事件流的三种模型:
1.事件冒泡。从内 ---> 外
2.事件捕获。从外 ---> 内
3.DOM2 的事件流。

给元素绑定事件处理程序:

  • 1.HTML 內联方式
    <input type="submit" name="submit" value="click" onclick="dealWith()">

缺点:
1.加载顺序问题。如果事件处理程序在 html 代码之后加载,用户可能在事件处理程序还未加载完成时,就点击按钮触发事件,存在时间差问题。
2.这样写 HTML 和 Javascript 代码过于紧密耦合,不方便维护。

  • 2.通过 Javascript 绑定事件
    HTML 代码
    <div class="ct">
        <input type="submit" name="submit" value="click" class="btn">
    </div>

Javascript 代码

    document.getElementsByClassName('btn')[0].onclick = function(){
        console.log(this);
    }
  • DOM2 级事件处理程序
  • 添加处理事件 addEventListener(type,listener,useCapture)
    type: 表示事件名。如 'click'
    listener: 表示事件发生后执行的程序。如 function(){console.log('被点击了')}
    useCapture: 指定事件发生在冒泡阶段(false.默认)还是捕获阶段(true)
  • 删除处理事件 removeEventListener(type,listener,useCapture)
  • onclick 与 addEventListener('click',listener,false) 的区别
  • onclick
   document.getElementsByClassName('btn')[0].onclick = function(){
       console.log('a');
   }/*会被覆盖,相当于函数被重写了*/
   document.getElementsByClassName('btn')[0].onclick = function(){
       console.log('b');
   }
  • addEventListener('click',listener,false)
   document.getElementsByClassName('btn')[0].addEventListener('click',function(){
       console.log('a');
   },true);/*有效,相当于两个函数合并*/
   document.getElementsByClassName('btn')[0].addEventListener('click',function(){
       console.log('b');
   },true);/*有效,相当于两个函数合并*/

DOM 事件对象(event 对象)的属性和方法

  • event.target 事件来源

  • event.preventDefault() 取消默认事件

  • event.stopPropagation() 取消事件进一步捕获或者冒泡

  • 事件代理:把事件绑定在父元素上,通过事件来源(event.target)确定事件的发出者。
    注:通过 JS 添加的元素的事件,无法触发原来绑定的。需要通过事件代理实现。

    <div class="ct">
        <div class="target">item 1</div>
        <div class="target">item 2</div>
        <div class="target">item 3</div>
    </div>
    <input type="submit" name="submit" value="添加" class="btn">
    <script type="text/javascript">
        var ct = document.getElementsByClassName('ct')[0];
        ct.addEventListener('click',function(e){
            console.log(e.target)
        },false);
    </script>
  • jQuery 中的 事件绑定
  • on('click',function(){})
  • 事件代理 on('click',function(){})
    <ul class="father">
        <li class="child"></li>
    </ul>

    <script>
        $('.father').on('click','.child',function(){});
    </script>
显示全文