zoukankan      html  css  js  c++  java
  • jQuery的事件

    1.事件流:

      (1)  事件捕获

      (2)  处于目标阶段

      (3)  事件冒泡

    <script>
            window.onload = function(){
    
                var oBtn = document.getElementById('btn');
    
                //1.
                document.addEventListener('click',function(){
                    console.log('document处于事件捕获阶段');
                }, true);
    
                //2.
                document.documentElement.addEventListener('click',function(){
                    console.log('html处于事件捕获阶段');
                }, true);
                //3
                 document.body.addEventListener('click',function(){
                    console.log('body处于事件捕获阶段');
                }, true);
                 //4.
                oBtn.addEventListener('click',function(){
                    console.log('btn处于事件捕获阶段');
                }, true);
                //
                oBtn.addEventListener('click',function(){
                    console.log('btn处于事件冒泡阶段');
                }, false);
                //5
                 document.body.addEventListener('click',function(){
                    console.log('body处于事件冒泡阶段');
                }, false);
                 //6
                  document.documentElement.addEventListener('click',function(){
                    console.log('html处于事件冒泡阶段');
                }, false);
               //7.
                document.addEventListener('click',function(){
                    console.log('document处于事件冒泡阶段');
                }, false);
    
        };
    
        </script>

    2.事件对象

      每一个事件的回调函数都会默认有一个事件对象

      event.target  触发目标的对象

      event.type  事件类型

      event.keyCode  键码

    3.事件冒泡  

      event.stopPropagation();

      阻止默认的事件

      event.preventDefault();

      return false;  既阻止事件冒泡又阻止默认行为

    4.事件代理

      自己完成不了的事情,交给别人去做

      原理:使用冒泡的机制

      现有的p以及未来添加的p都能做事件操作

      $("div").on("click","p",fn)

    5.鼠标事件

      click  鼠标单击触发事件

      dbclick  双击触发

      mousedown()/up()  鼠标按下/弹起触发事件

      mousemove()  鼠标移动事件

      mouseover()/out()  鼠标移入/移出触发事件(鼠标指针穿过/离开被选元素或者当前元素的子元素会触发事件)

      mouseenter()/leave()  鼠标进入/离开触发事件(鼠标指针只在穿过/离开被选元素触发事件)

      focus()/blur()  鼠标聚焦/失去焦点触发事件

      keydown()/up()  键盘按键按下/弹起触发

    6.表单事件

      change()  表单元素发生改变时触发事件

      select()  文本元素发生改变时触发事件

      submit()  表单元素发生改变时触发事件

    7.单双击问题

    var timer = null;
    $("button").click(function(event){
       console.log(timer);
       clearTimeout(timer);
       //定时器 300ms 一次性定时器
        timer = setTimeout(function(){
            console.log("单击了");
        },300);
    
    $("button").dbclick(function(event)){
        console.log(timer);
        clearTimeout(timer);
        console.log("双击了");
    });
  • 相关阅读:
    CSS3 target伪类简介
    不用position,让div垂直居中
    css3 在线编辑工具 连兼容都写好了
    a标签伪类的顺序
    oncopy和onpaste
    【leetcode】1523. Count Odd Numbers in an Interval Range
    【leetcode】1518. Water Bottles
    【leetcode】1514. Path with Maximum Probability
    【leetcode】1513. Number of Substrings With Only 1s
    【leetcode】1512. Number of Good Pairs
  • 原文地址:https://www.cnblogs.com/s593941/p/9813389.html
Copyright © 2011-2022 走看看