专栏首页天天js事件对象相关随记

js事件对象相关随记

1.什么是事件

JavaScript事件是由访问Web页面的用户引起的一系列操作,
例如:用户点击。当用户执行某些操作的时候,再去执行一系列代码。

2.事件的三种写法

//在HTML中把事件处理函数作为属性执行JS函数
<input type="button" value="按钮" onclick="alert('你好');"  />   

//执行与脚本分离
<input type="button" value="按钮" onclick="fn();"  />            

//分离的脚本
    var input = document.getElementsByTagName('input')[0];     
    input.onclick = function () {     
        alert('你好');
    };

3.事件对象

一.事件对象
当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息。
包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。

在非IE浏览器下,事件对象作为事件的参数,在IE下是window.event
//实现跨浏览器兼容获取event对象
    input.onclick = function (evt) {
        var e = evt || window.event;                
        alert(e);
    };
二.事件对象的作用

1. 可视区及屏幕坐标

clientX 可视区X坐标,距离左边框的位置
clientY 可视区Y坐标,距离上边框的位置
screenX 屏幕区X坐标,距离左屏幕的位置
screenY 屏幕区Y坐标,距离上屏幕的位置

    document.onclick = function (ev) {         
        var e = ev || window.event;
        alert(e.clientX + ',' + e.clientY);
        alert(e.screenX + ',' + e.screenY);
    };
2.判断热键是否按下

像Shfit、Ctrl、Alt等,

shiftKey 判断是否按下了Shfit键
ctrlKey 判断是否按下了ctrlKey键
altKey 判断是否按下了alt键
metaKey 判断是否按下了windows键,IE不支持
eg:
<script>
    window.onload = function(){
        document.onkeydown = function(e){
            if(e.ctrlKey){
                alert("按下ctrl键")//按下ctrl键弹出   按下ctrl键
            }
        }
    }
</script>

3..判断键码
eg:
<script>
    window.onload = function(){
        document.onkeydown = function(e){
            if(e.ctrlKey){
               alert(e.keyCode)//按下ctrl键弹出17
            }
        }
    }
</script>
4.阻止浏览器默认行为
        参考下一节内容
5.阻止冒泡
         参考下一节内容
6.事件委托
一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,
那如果是很多的dom需要添加事件处理呢?比如我们有100个li,每个li都有相同
的click点击事件,可能我们会用for循环的方法,来遍历所有的li,然后给它们添
加事件,那这么做会存在什么影响呢?

在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运
行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览
器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什
么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就
会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大
大的减少与dom的交互次数,提高性能;

每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率就越大,
自然性能就越差了,比如上面的100个li,就要占用100个内存空间,如果
是1000个,10000个呢,那只能说呵呵了,如果用事件委托,那么我们就
可以只对它的父级(如果只有一个父级)这一个对象进行操作,这样我们
就需要一个内存空间就够了
eg:
<body>
<ul id = "list">
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
<script>
    var list = document.getElementById("list");
    list.onclick = function(e){
        var ev = e || window.event;
        var target = ev.target || ev.srcElement;
        if(target.tagName = "LI"){
            for(var i = 0;i<list.children.length;i++){
                list.children[i].style.background = "";
            }
            target.style.background = "blue";
        }
    }
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • H5缓存

    天天_哥
  • DOM

    天天_哥
  • 20171018

    天天_哥
  • bootstrap 多级菜单 注册登录

    li class=dropdown a class=dropdown-toggle data-toggle=dropdown ul class=dropdo...

    用户5760343
  • bootstrap bootstrap-dropdown.js

    <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a ...

    用户5760343
  • 原 each()、map()

    作者:汪娇娇 日期:2016.9.1 如果说到某个元素的开关事件,第一反应那就是用一个变量做标记,比如flag,为1时开,为0时关,这是很简单的。下面我将以li...

    jojo
  • bootstrap nav 导航菜单

    nav nav-tabs <p>标签式的导航菜单</p> <ul class="nav nav-tabs"> <li class="active"><a ...

    用户5760343
  • bootstrap 分页

    <div class="row pagination-wrap"> <ul class="pagination"> <li><a href="#"><spa...

    用户5760343
  • PDO详解

    一、PDO诞生的意义 PHP对数据库支持的抽象度不够,接口不统一。每一种数据库环境都必须重新定义数据库的操作。在这种背景下,统一操作接口PDO诞生了。 在PHP...

    lonelydawn
  • React 虚拟Dom渲染算法

    React提供了一系列声明性的API接口,因此在使用时不必担心每次库的更新会修改API接口。这样可以降低编写应用的复杂度,但是带来的问题是无法很好的理解Reac...

    随风溜达的向日葵

扫码关注云+社区

领取腾讯云代金券