js事件的获取

获取元素样式属性

事件对象

作用：捕获用户的操作行为
事件对象的获取：
1、全局event对象--IE9+,chrome
2、形参接收方式--

document.onclick = function(m){ ???????m = m || event;//兼容ie,chrome及IE8- ???????alert(m); ???}

//拖拽var box = document.getElementById("box");//获取box元素ID ???box.onmousedown = function(m){ ???????m = m || event;//兼容浏览器 ???????var initX = m.clientX,//定义鼠标初始位置 ???????????initY = m.clientY, ???????????initLeft = box.offsetLeft,//box初始位置 ???????????initTop = box.offsetTop; ???????????document.onmousemove = function(m){ ???????????????m = m || event; ???????????????var moveX = m.clientX,//鼠标拖拽位置 ???????????????????moveY = m.clientY, ???????????????????changeX = moveX - initX,//拖拽改变距离 ???????????????????changeY = moveY - initY; ???????????????????console.log(changeX,changeY);//打印出改变距离 ???????????????box.style.left = initLeft + changeX + "px";//box最终显示位置 ???????????????box.style.top = initTop + changeY +"px"; ???????????} ???} ???document.onmouseup = function(){//当鼠标释放时，跳出移动操作 ???????document.onmousemove = null; ???}//注意：box.onmousemove和document.onmousemove的差别，前者不需要长按住鼠标，而后者需要

冒泡事件

当父元素和子元素都绑定了“相同事件”，
子元素触发事件的时候会传递给父元素，相当于父元素也触发了事件 ——— 事件传播，冒泡事件

var parent = document.getElementById("parent"); ???var box = document.getElementById("box"); ???box.onmouseover = function(m){ ???????m = m || event;//兼容模式 ???????m.cancelBubble = true;//阻止冒泡 ???????console.log("子节点"); ???} ???parent.onmouseover = function(){ ???????console.log("父节点======="); ???}

监听事件

addEventListener(‘click‘, fn2, false) //chrome、IE9+ ???removeEventListener(‘click‘, fn2, false) ???????参一：注册的事件的事件名字 ???????参二：注册事件的函数 ???????参三：true捕获事件，false冒泡事件(默认值)。attachEvent(‘onclick‘, fn1) //IE8-执行顺序相反 ??????detachEvent(‘onclick‘, fn1); ???????参一：事件名字 ???????参二：注册事件的函数

//兼容模式 function addEvent(dom,eventName,fun){//定义函数 ???????if(dom.addEventListener){//判断事件兼容的浏览器是否为chrome、IE9+ ???????????dom.addEventListener(eventName,fun); ???????}else{//否者执行IE浏览器模式下事件 ???????????dom.attachEvent(‘on‘+eventName,fun); ???????} ???} ???addEvent(document,‘click‘,fn1);//调用函数 ???addEvent(document,‘click‘,fn2);

键盘事件

根据输入键盘值（keycode）响应事件；

//例：输入上下左右调整模块var box = document.getElementById("box"); ???document.onkeydown = function(m){//传入参数 ???????m = m || event;//兼容模式 ???????????????var boxLeft = box.offsetLeft,//定义初始距离 ???????????boxTop = box.offsetTop; ???????switch(m.keyCode) {//传递键盘值参数进行循环 ???????????case 37://左键keycode=37 ???????????????boxLeft -= 5;//移动距离 ???????????????break; ???????????case 38://上键keycode=38 ???????????????boxTop -= 5; ???????????????break; ???????????case 39://右键keycode=39 ???????????????boxLeft += 5; ???????????????break; ???????????case 40://下键keycode=40 ???????????????boxTop += 5; ???????????????break; ???????????default://其他情况 ???????????????console.log("请输入上下左右按键"); ???????} ???????box.style.left = boxLeft + "px";//赋值变换后的距离 ???????box.style.top = boxTop + "px"; ???}

js事件的获取

原文地址：https://www.cnblogs.com/zhuzq/p/9534622.html