zoukankan      html  css  js  c++  java
  • JS事件

    JS事件 *****

    一、事件的两种绑定方式 ***

    1、on事件绑定方式

    document.onclick = function() {
        console.log("文档点击");
    }
    // on事件只能绑定一个方法,重复绑定保留最后一次绑定的方法
    
    document.onclick = function() {
        console.log("文档点击");
    }
    // 事件的移除
    document.onclick = null;
    

    2、非on事件绑定方式

    document.addEventListener('click', function() {
         console.log("点击1");
    })
    document.addEventListener('click', function() {
         console.log("点击2");
    })
    // 非on事件可以同时绑定多个方法,被绑定的方法依次被执行
    // addEventListener第三个参数(true|false)决定冒泡的方式
    
    function fn () {}
    document.addEventListener('click', fn);
    // 事件的移除
    document.removeEventListener('click', fn);
    

    二、事件参数event *****

    • 存放事件信息的回调参数

    三、事件的冒泡与默认事件 *****

    • 事件的冒泡:父子都具有点击事件,不处理的话,点击子级也会出发父级的点击事件
    <body id="body">
       	<div id="sup">
            <div id="sub"></div>
        </div>
    </body>
    

    <script>
    sub.onclick = function (ev) {
    // 方式一
    ev.stopPropagation();
    console.log("sub click");
    }
    sup.onclick = function (ev) {
    // 方式二
    ev.cancelBubble = true;
    console.log("sup click");
    }
    body.onclick = function (ev) {
    console.log("body click");
    }
    </script>

    • 默认事件:取消默认的事件动作,如鼠标右键菜单
    <body id="body">
       	<div id="sup">
            <div id="sub"></div>
        </div>
    </body>
    

    <script>
    sub.oncontextmenu = function (ev) {
    // 方式一
    ev.preventDefault();
    console.log("sub menu click");
    }
    sup.oncontextmenu = function (ev) {
    console.log("sup menu click");
    // 方式二
    return false;
    }
    body.oncontextmenu = function (ev) {
    console.log("body menu click");
    }
    </script>

    四、鼠标事件 *****

    • 鼠标事件
    onclick:鼠标点击
    ondblclick:鼠标双击
    onmousedown:鼠标按下
    onmousemove:鼠标移动
    onmouseup:鼠标抬起
    onmouseover:鼠标悬浮
    onmouseout:鼠标移开
    oncontextmenu:鼠标右键
    
    • 事件参数ev
    ev.clientX:点击点X坐标
    ev.clientY:点击点Y坐标
    

    五、键盘事件 ***

    • 键盘事件
    onkeydown:键盘按下
    onkeyup:键盘抬起
    
    • 事件参数ev
    ev.keyCode:按键编号
    ev.altKey:alt特殊按键
    ev.ctrlKey:ctrl特殊按键
    ev.shiftKey:shift特殊按键
    

    六、表单事件 ***

    onfocus:获取焦点
    onblur:失去焦点
    onselect:文本被选中
    oninput:值改变
    onchange:值改变,且需要在失去焦点后才能触发
    onsubmit:表单默认提交事件
    

    七、文档事件 *

    • 文档事件由window调用
    onload:页面加载成功
    onbeforeunload:页面退出或刷新警告,需要设置回调函数返回值,返回值随意
    

    八、图片事件 *

    onerror:图片加载失败
    

    九、页面事件 *****

    onscroll:页面滚动
    onresize:页面尺寸调整
    
    window.scrollY:页面下滚距离
    
  • 相关阅读:
    转】使用Maven编译项目遇到——“maven编码gbk的不可映射字符”解决办法
    转】Maven学习总结(九)——使用Nexus搭建Maven私服
    转】Maven学习总结(八)——使用Maven构建多模块项目
    转】Maven学习总结(七)——eclipse中使用Maven创建Web项目
    转】Maven学习总结(六)——Maven与Eclipse整合
    Storm具体解释一、Storm 概述
    ThinkPHP 连接Oracle的配置写法,(使用Oci扩展而非PDO的写法)
    VBA怎样统计同一类型的数据的总和
    在html中禁用自己主动完毕
    Sort方法的扩展
  • 原文地址:https://www.cnblogs.com/liu--huan/p/9810543.html
Copyright © 2011-2022 走看看