完成拖拽事件:
如何让鼠标位于被拖拽元素的中心(完美的一种方式)
当我们拖拽网页中的内容时,浏览器会默认去搜索引擎中搜索内容
此时会导致拖拽功能的异常,这个时浏览器提供的默认行为
如果不希望发生这个行为,那么可以使用 return false 来取消默认行为
但是这一招对IE8不管用
对于IE8 设置鼠标所有的捕获事件 使用 作用对象.setCapture()方法(只有IE支持,用火狐不报错,但是在chrome中会包错,从而阻断后面的代码执行) 但是当鼠标抬起的时候 div还是会进行移动 所以后面的在鼠标抬起的事件中设置 作用对象.releaseCapture()
setCapture()方法(只有IE支持,用火狐不报错,但是在chrome中会包错,从而阻断后面的代码执行) --解决方法?
加上 obj.setCapture && obj.setCapture()
和 obj.releaseCapture && obj.releaseCapture();
这两行代码即可。
最后附上完美的实现拖拽事件的源码(最后的时候最好加上 return false)
滚轮事件
nomousewheel 是一个鼠标滚轮滚动的事件,在滚轮滚动的时候触发
但是在火狐当中不支持该属性
在火狐中要使用DOMMouseScroll 来绑定滚动事件 但是该事件要通过addEventListener()来进行绑定
判斷鼠標滾輪的方向
// alert(event.wheelDelta)
// 向上是180px 向下 是-180 px 判断的时候不看大小 只看正负
// 在火狐中不支持这个属性
在火狐中:使用下面函数 来获取滚动的方向
(event.detail)
当滚轮滚动时,如果浏览器由滚动条,则滚动条会跟随着滚动 这是浏览器的默认行为,如果不希望发生,则可以取消默认行为
加上一个 return false
但是使用addEventListener()方法绑定响应哈纳树,取消默认行为时不能return false
需要使用event 来 取消默认行为
event.preventDefault() 但是IE8不支持 如果直接调用会报错 所以要这么写
event.preventDefault&& event.preventDefault()
键盘事件
键盘事件一般都会绑定给能够获取焦点的对象或者时document对象,div不能被绑定
onkeydown 事件 如果一直按着 那么函数会一直被触发
当连续触发时,第一次和第二次之间的间隔会长一点时间,是为了防止误操作的发生
可以通过keyCode来获取当前按下键的编码
BOM
浏览器对象模型 BOM可以通过js来操作浏览器,在BOM中我们提供了一组对象,用来完成浏览器的操作
BOM对象
window 代表浏览器的整个窗口,同时Window也是网页中的全局对象
Navigator 代表当前浏览器的信息,但通过该对象可以用来识别不同的浏览器
Location 代表当前浏览器的地址栏信息,或者操作浏览器跳转页面
History 操作浏览器的历史记录 由于隐私作用不能访问具体的,只能操作浏览器向前或者向后翻页的记录 只在当次访问有效
Screen 代表用户的屏幕信息,可以通过该对象获取到用户的显示器相关许欸信息,而且只在当次访问有效
这些BOM对象在浏览器都是作为window对象的属性保存的,可以通过window对象来使用,也可以直接使用。
定时器
setInterval()定时调用 每隔一段时间执行一次,参数:1.回调函数,该函数每隔一段实际按会被调用一次,每次调用间隔的时间,单位时毫秒
clearInterval()关闭定时器
每次点击一次按钮就会开启多个定时器,这就导致图片切换的速度过快
并且我们只能关闭最后一次开启的定时器
在开启定时器之前,需要将当前元素上的其他定时器关闭
所以在开始第一次定时器之前,就关闭一次定时器。
延时调用
延时调用指的是 一个函数不马上执行,而是隔一段时间以后再调用,而且只会执行一次
延时调用和定时调用的区别,定时调用会执行多个,而延时调用只会执行一次
setTimeout() 和clearTimeout()
延时调用和定时调用实际上是可以相互代替的,在开发中可以根据自己的需要去选择。
类的操作
通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次
这样的执行性能是比较差的,
function addClass(obj,cn){}
function hasClass(obj,cn){}
用来切换一个类
function toggleClass(obj,cn){}
移动端的事件
触屏事件
touchstrat 是一个事件对象, 当手机触摸元素的时候触发。
touches 正在触摸屏幕的所有的手指列表
targetTouches 正在触摸当前DOM元素 如果监听
touchmove 当手指在元素滑动时触发。
touchend 手指离开时候的事件
classList属性是一个HTML5新增的一个属性,返回元素的类名,但是IE10以上的版本支持
该元素用于在元素中添加,移除以及切换css类,有以下方法
1.添加类名 但是在后面追加的类名不会覆盖以前的类名
div.classList.add('three')
2.移除某一个类名
div.classList.remove('three’)
3.切换一个类名
div.classList.toggle('bg')