JS事件对象
weixin_40025586
这个作者很懒,什么都没留下…
展开
-
JS事件对象--1(事件对象作用及兼容)
一.事件对象的作用1.可以获得和哪个按键结合2.可以获得点击所在的位置3.可以获得点击所对应的标签:二.浏览器兼容:形参对象是针对于现代浏览器,IE浏览器不能通过形参无法通过形参获得对象,通过window.event来获得,即console.log(window.event)。1.兼容操作方法:var ev=e || window.event; --此处为:或语法,返回为真的值。...原创 2018-09-27 23:06:51 · 600 阅读 · 0 评论 -
JS事件对象(练习与复习)--碰撞检测(函数回调)
1.碰撞检测:CSS+Body部分:<style type="text/css"> #first { width:100px; height:100px; background:pink; position:absolute; } #second{ width:100px; height:100px; background:blue; pos...原创 2018-10-17 22:53:46 · 295 阅读 · 0 评论 -
JS事件对象--表单事件
1.表单事件:(1).焦点获得焦点:onfocus失去焦点:onblur(2).表单提交:函数:submit();(3).select,checkbox,radio,text在修改完以后发生改变:onchange函数4.输入框修改过程中进行监听值oninput函数2.实际例化body部分<form action="index.html" method="post"&g...原创 2018-10-15 22:49:43 · 212 阅读 · 0 评论 -
JS事件对象--移动端事件--TouchJS使用
1.事件代理:touch.on(element, types, selector,callback);功能描述:事件绑定方法,根据参数区分事件绑定和事件代理。参数描述: 参数 描述 作用 element element或string 事件代理元素对象、选择器 ...原创 2018-10-19 13:13:14 · 1404 阅读 · 0 评论 -
JS事件对象--移动端事件--摇一摇
1.移动端事件–摇一摇:微信摇一摇功能JS封装函数为: //添加事件 function shake(callBack) { var last_x=last_y=last_z=0; var last_time=new Date().getTime(); function initional() { if(window.DeviceMotionEvent) {window.ad...原创 2018-10-18 11:32:12 · 417 阅读 · 0 评论 -
JS事件对象7--滚轮事件(练习与复习)
鼠标滚轮事件综述:onmousewheel:滚轮事件//针对非火狐浏览器 window.onmousewheel=function(e) { ev=e||window.event; //ev.wheelDelta:可以获得一个数值 //向下滚动是正值 //向上滚动是负值 }//火狐浏览器滚动方式 window.addEvent...原创 2018-10-09 22:07:25 · 212 阅读 · 0 评论 -
JS事件对象5--阻止默认事件(鼠标事件)
阻止默认事件的两种方式和兼容方式:&lt;script type="text/javascript"&gt; //阻止系统默认事件的两种方式: //1.IE:return false; //2.现代浏览器:事件对象.preventDefault();阻止默认事件的鼠标按下和右键具体操作: //wrap和a是事先声明好的id样式和标签 var a=document.querySele...原创 2018-10-09 22:07:34 · 2739 阅读 · 0 评论 -
JS事件对象6--键盘事件部分
键盘类事件综述: 1.键盘类的事件都是添加到window上,一般有 onkeydown,onkeyup,onkeypress三种事件。 2.onkeydown和onkeypress比较: (1) onkeydown比onkeypress先执行 (2)onkeydown基本支持一切的按键 onkeypress不支持一些功能键,例如:上下左右键,F1- F12,Tab,...原创 2018-10-09 22:07:43 · 446 阅读 · 0 评论 -
JS事件对象4--事件监听-陷阱实例(移入移出实践)
移入移出实践及注意事项:1.html+CSS部分:&lt;style type="text/css"&gt; *{ margin:0; padding:0; } #wrap{ width:200px; height:200px; background:green; position:relative; margin:0 auto;...原创 2018-09-28 23:06:49 · 339 阅读 · 0 评论 -
JS事件对象--3(事件冒泡和事件监听)
一.事件–事件冒泡:事件冒泡的含义和阻止冒泡的兼容写法:&lt;script type="text/javascript"&gt; // 事件冒泡:如果两个或者多个标签叠在一起,一旦这几个标签都有事件触发, // 那么点击的时候会同时触发这些事件称之为事件冒泡。 var wrap=document.getElementById('wrap'); var first=document.g...原创 2018-09-28 22:59:41 · 246 阅读 · 0 评论 -
JS事件对象--2(鼠标事件小例子)
一.鼠标事件小例子:CSS部分:<style type="text/css"> *{ margin:0; padding:0; } #wrap{ width:180px; height:180px; background:red; position:absolute; } </style>JS部分:<sc...原创 2018-09-28 22:44:35 · 100 阅读 · 0 评论 -
JS事件对象--移动端事件--touch(触摸事件)
1.触摸事件touchstart:开始点击touchmove:点击后开始移动touchend:手抬起时点击结束touchcancel:当点击过程中电话阻止事件时2.移动端的事件对象的常用属性:(1)Touch常用的DOM属性:touches:表示当前跟踪的触摸操作的Touch对象的数组–点击触摸时有多少个Touch对象targetTouches:特定于事件目标的Touch对象的数组...原创 2018-10-21 22:44:57 · 920 阅读 · 0 评论