javascript（1）事件

最新推荐文章于 2021-03-02 17:21:17 发布

ruyulin

最新推荐文章于 2021-03-02 17:21:17 发布

阅读量248

点赞数

分类专栏： javascript 文章标签：事件

本文链接：https://blog.csdn.net/ruyulin/article/details/81211840

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在web开发过程中，经常能碰到需求，比如拖动等操作，虽然H5已经提供了拖动，但是我们想要兼容低版本的浏览器，那就要通过javascript的事件的方式来实现。就拿这个拖动来说，使用javascript实现并不难。有些人可能使用第三方js控件来实现，这样也可以。但是我还是建议，以后用到了什么控件，如果我们可以自己实现，何不自己尝试下呢。
javascript几年前系统学习过，但是由于长时间不写前端代码，都忘个差不多了。也怪自己平时整理笔记，都是形成word文档，时间长不查看，有一天做电脑系统，被自己全部格掉了，那一刻，心像流血撒。

事件使用非常简单，我们一般可以这样使用事件：

为某个标签绑定事件
在js中为某个对象绑定事件
在js中为接触某个对象

事件有个奇怪的现象（冒泡、捕获），我们可以通过这个现象，开发自己想要的效果

我们可以利用事件冒泡开发
我们可以利用事件捕获，但是事件捕获有兼容性问题，使用慎重
我们也可以阻止事件冒泡或者捕获

事件分类

事件主要分为：鼠标事件、键盘事件、html事件，这些事件兼容性都很好，后期我们还可以通过js自定义事件。下面列出了一些常用的事件

鼠标事件

onclick ：鼠标点击事件
ondblclick ：鼠标双击事件
onmousedown ：鼠标按下（未抬起）事件
onmouseout ：鼠标从某个元素移开事件
onmouseover ：鼠标移入某个元素事件
onmouseup ：按下后，松开鼠标事件
onmousemove ：鼠标移动事件
oncontextmenu ：鼠标右键事件

键盘事件

onkeydown ：键盘的某个按键按下事件
onkeypress ：键盘一直按下某个键事件，只会响应字母数字符号，其他的例如F1-F12、ctrl/shift/alt等不会响应
onkeyup ：键盘的某个按键被松开

html事件

onload ：页面加载完毕后触发
onabort ：图形加载中断触发
onblur ：失去焦点事件
onerror ：加载文档或者图像时发生错误触发
onchange ：文本框内容发生改变时触发事件
onfocus ：获取焦点事件
onreset ：重置事件
onresize ：尺寸调整事件
onselect ：文本选定事件
onsubmit ：表单提交事件

事件绑定

事件绑定的意思是为指定的对象添加已经事件监听，当用户触发了这个对象事件，那么会执行事件处理的函数。我自己的理解。
通常绑定事件有这么几种方式：

直接在html标签上绑定
通过对象引用调用相对应的事件方法绑定
通过onlister监听的方式绑定

拖拽demo

下面示例代码，没有考虑浏览器兼容的问题。有兴趣的可以自己改改。另外被拖动的div需要设置position: relative; left: 0px; top: 0px;
否则无法拖动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>darg</title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen"> 
        .darg{width:100px; height:100px; background: red; position: relative; left: 0px; top: 0px;}
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var darg = document.getElementById('darg');
            darg.addEventListener('mousedown', function(e){
　　　　　　      
                var _x = e.clientX - darg.offsetLeft;
　　　　　　      var _y = e.clientY - darg.offsetTop;

                console.log('1');
                document.onmousemove = function(e){
                    console.log('2');
                    darg.style.left = e.clientX - _x + 'px';
　　　　　　          darg.style.top = e.clientY - _y + 'px'; 
                    return false;
                };

                document.onmouseup = function(){
                    console.log('3');
                    document.onmousemove = null;
　　　　　　          document.onmouseup = null;
                    return false;
                };
            }, false);
        }
    </script>
</head>
<body>
    <div id="darg" class="darg"></div>
</body>
</html>

DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。

事件顺序有两种类型：事件捕捉和事件冒泡。

事件冒泡

DOM树型结构上理解，就是事件由叶子节点沿祖先结点一直向上传递直到根节点；从浏览器界面视图HTML元素排列层次上理解就是事件由具有从属关系的最确定的目标元素一直传递到最不确定的目标元素.冒泡技术.冒泡型事件的基本思想,事件按照从特定的事件目标开始到最不确定的事件目标.

事件捕获

它与冒泡型刚好相反，由DOM树最顶层元素一直到最精确的元素

如何阻止事件冒泡或者捕获

//IE
window.event.cancelBubble = true;
//标准DOM
event.stopPropagation();
//跨浏览器
event.returnValue = false;

//事件处理函数return false 是阻止事件传递的。
return false