js-事件

Posted 2021-01-20 nannanxiaogege

js-事件

什么是事件?
浏览器和用户之间的交互行为

注册事件处理程序

通过 dom 元素的属性注册事件

 

    <button type="button" id="btn">点我</button>
    <script>
        // 获取 dom 元素
        var btn = document.getElementById(‘btn‘);

        // 通过 dom 元素的属性注册事件
        btn.onclick = function(event){

            // 事件对象中包含了事件的详细信息
            console.log(event)
            
            console.log(‘Hello Vuejs!‘)
        };
    </script>

 

 

 

通过标签的属性注册事件

 

   <button type="button" id="btn" onclick="greeting();">点我</button>
   <script>

      function greeting(){
         console.log(‘Hello‘);
         console.log(‘World‘);
      }

   </script>

 

 

通过标签的属性注册事件

 

    <button type="button" id="btn">点我</button>
    <script>

        // 获取dom元素
        var btn = document.getElementById(‘btn‘);

        btn.addEventListener(‘click‘, function(){
            console.log(‘使用addEventListener()方法注册事件‘);
        });
       

    </script>

 

事件的分类

鼠标事件
onclick                  点击鼠标

ondblclick             双击鼠标

onmouseover       鼠标移入

onmouseup          鼠标按下松开

onmousedown     鼠标按下时发生

onmouseout         鼠标移出

onmousemove     鼠标移动时发生

事件默认行为

oncontextmenu   右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发

键盘事件

html事件
onfocus 表单获取焦点

onblur 表单失去焦点

onchange 文本框内容改变失去焦点的时候触发

oninput  实时改变输入框的值

onselect  当用户选中文本框的内容时触发

onresize 当窗口大小变化时触发行为

onscroll  滚动滚动条

document.body.scrollTop 在IE中有用

document.documentElement.scrollTop 非IE中有用

事件对象event

var e=ev || window.event  //兼容IE浏览器

 

事件绑定，监听

IE（非标准浏览器）

attachEvent(事件名称，事件函数)       绑定事件处理函数

detachEvent(事件名称，事件函数)      解除绑定

DOM方式（标准浏览器）

addEventListener(事件名称，事件函数，是否捕获)           绑定、捕获事件

removeEventListener(事件名称，事件函数，是否捕获)     解除绑定

 

true=捕获

 

false=冒泡

设置，释放全局捕获

setCapture()              设置全局捕获

releaseCapture()       释放全局捕获