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>
     
  • 相关阅读:
    ok~加油!
    解析window.open链接的参数
    Arrya数组添加过滤条件
    Oracle 查询今天、昨日、本周、本月和本季度的所有记录
    Sql Server日期查询-SQL查询今天、昨天、7天内、30天
    Lua 中 pairs 和 ipairs 的区别
    关于SignalR连接数量问题的记录
    IceStorm示例运行步骤
    从 OPC 到 OPC UA
    SQL Server 2008 R2 Express Profiler
  • 原文地址:https://www.cnblogs.com/ytsbk/p/7375180.html
Copyright © 2011-2022 走看看