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

    一、鼠标事件

    onclick             鼠标单击
    ondblclick           鼠标双击
    onmousedown           鼠标按下
    onmouseup          鼠标抬起
    onmouseover          鼠标悬浮
    onmouseout            鼠标离开
    onmousemove         鼠标移动
    onmouseenter         鼠标进入
    onmouseleave         鼠标离开

    二、键盘事件

    1、keydown()
    keydown 事件会在键盘按下时触发。
    2、keypress()
    keypress 事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键。
    3、keyup()
    keyup 事件会在按键释放时触发,也就是你按下键盘起来后的事件。
    4、keycode:获得键盘上对应的 ascII 码
      a、区分IE浏览器和W3C标准浏览器
    document.onkeydown = function (event) {
        if (window.event){
        console.log("我是IE、或者chrome");
        console.log(event.keyCode); /!*IE chrome*!/
        }else{
        console.log("我是除chrome的W3C");
        console.log(event.which); /!*W3C*!/
        }
        };
      b、不区分大小写
     document.onkeydown = function (event) {
        console.log(event.keyCode);
        };
      c、区分大小写
    document.onkeypress = function (event) {
        console.log(event.keyCode);
        };

    三、HTML事件

    onload           页面结束加载之后触发。
    onunload       一旦页面已下载时触发(或者浏览器窗口已被关闭)。
    onselect        在元素中文本被选中后触发。
    onchange        在元素值被改变时运行的脚本。
    onfocus         当元素获得焦点时运行的脚本。
    onresize        当浏览器窗口被调整大小时触发。
    onscroll         当元素滚动条被滚动时运行的脚本。

    四、同一元素添加相同事件W3C和IE的区别

    var btn3 = document.getElementById("btn3");
    Dom0模型: 同一个元素,同类事件只能添加一个,如果添加多个,后面添加的会覆盖前面添加的
    btn3.onclick = function () {
    console.log("Hello");
    };
    btn3.onclick = function () {
    console.log("Hello3")
    };
    Dom2模型:可以给同一个元素添加多个同类事件
    btn3.addEventListener("click",function () {
    alert("Hello1");
    });
    btn3.addEventListener("click",function () {
    alert("Hello2");
    });
    不同浏览器的兼容写法
    if (btn3.attachEvent){
    /*IE低版本*
    btn3.attachEvent("onclick",function () {
    alert("IE Hello");
    });
    }else{
    /*IE高版本 和W3C浏览器*/
    btn3.addEventListener("click",function () {
    alert("W3C Hello");
    });
    }

    五、事件冒泡和事件捕获

    事件冒泡(false):从子元素到父元素
    事件捕获(true):从父元素到子元素
    stopPropagation:阻止事件冒泡
    preventDefault(W3C)、returnValue(IE) 阻止默认事件
    代码举例:
    <script>
        var div1 = document.getElementById("div1");
        div1.addEventListener("click",function (event) {
            event.stopPropagation();
            alert("div1");
        },false);
        var div2 = document.getElementById("div2");
        div2.addEventListener("click",function (event) {
            event.stopPropagation();
            alert("div2");
        },false);
        var div3 = document.getElementById("div3");
        div3.addEventListener("click",function (event) {
            event.stopPropagation();
            alert("div3");
        },false);
        var div4 = document.getElementById("div4");
        div4.addEventListener("click",function (event) {
            event.stopPropagation();
            alert("div4");
        },false);
    </script>
     
  • 相关阅读:
    [开荒啦]ECS服务器初体验
    [邻接矩阵形式]无向图的建立与深度,广度遍历
    [Java 学习笔记] 泛型
    2021辽宁省大学生程序设计竞赛 C D E F G I L
    [DOJ 练习] (取余优化) 判断一个字符串不区分大小写是否回文
    [Acwing Linux基础课] Docker基本操作
    [图解] 数组模拟Trie树
    http://bbs.windows7en.com/thread3102611.html win7
    简单介绍Linux下安装Tomcat的步骤
    linux下导入导出MySQL数据库
  • 原文地址:https://www.cnblogs.com/ytsbk/p/7375180.html
Copyright © 2011-2022 走看看