JavaScript_事件、函数、变量作用域

1、事件的种类。

1、一般事件
onclick         鼠标点击时触发此事件
ondblclick      鼠标双击时触发此事件
onmousedown     按下鼠标时触发此事件
onmouseup       鼠标按下后松开鼠标时触发此事件
onmouseover     当鼠标移动到某对象范围的上方时触发此事件
onmousemove     鼠标移动时触发此事件
onmouseout      当鼠标离开某对象范围时触发此事件
onkeypress      当键盘上的某个键被按下并且释放时触发此事件
onkeydown       当键盘上某个按键被按下时触发此事件
onkeyup     当键盘上某个按键被按放开时触发此事件

2、页面事件
onabort     图片在下载时被用户中断
onbeforeunload  当前页面的内容将要被改变时触发此事件
onerror         出现错误时触发此事件
onload          页面内容完成时触发此事件
onresize        当浏览器的窗口大小被改变时触发此事件
onscroll        浏览器的滚动条位置发生变化时触发此事件
onstop          浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
oncontextmenu   当弹出右键上下文菜单时发生
onunload        当前页面将被改变时触发此事件

3、表单事件
onblur      当前元素失去焦点时触发此事件
onchange    当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus     当某个元素获得焦点时触发此事件
onreset     当表单中RESET的属性被激发时触发此事件
onsubmit    一个表单被递交时触发此事件

2、事件绑定

1、事件监听器：
语法：
通过id或标签名获取标签
var 变量名 = document.getElementsByTagName(‘标签名’)
var 变量名 = document.getElementById(‘标签id名’)
变量名.addEventListener(“事件方法”, 函数名 , true/false )；

2、事件绑定的语法：
变量名.addEventListener(“事件方法”, 函数名 , true/false )；
divs[0].addEventListener(“click”, evt1 , false )；
onclickclick，注意要使用“”将事件名包起来
evt1：函数名称或者也可以内联地声明一个函数
第三个参数：确定以何种事件流触发事件（true：捕获机制，false：冒泡机制）

3、事件移除。
变量名.removeEventListener(“事件方法”, 函数名 , true/false )；
通过addEventListener添加的事件处理程序只能够使用removeEventListener来删除；移除时传入的参数与添加处理程序时使用的参数相同。
对于addEventListener()添加的匿名函数无法移除

4、IE事件绑定移除。
addEventHandler(要绑定事件的对象,‘click’,函数名);
obj.detachEvent(evtype,fn)
IE提供的删除事件处理函数的方法，evtype包含on前缀

3、阻止冒泡的发生。

非IE 浏览器：event.stopPropagation();
IE浏览器 ： window.event.cancelBubble = true;

f (evt.stopPropagation) {
evt.stopPropagation();
}
else {
window.event.cancelBubble = true;
}

4、函数调用方式

1、页面元素的事件一起使用，调用格式：

事件名＝“函数名( )” ;

<input type="button" name="btn" value="显示hello world" onclick="showHello()" />

2、通过找到要提供事件的对象，触发对应的事件。

var btn = document.getElementById(btnMatch)；
btn.onclick = match;//点击后触发

5、match() match

match() 直接执行函数

match 相当于将函数作为变量赋值给了btn.onclick属性，并不立即执行函数，而是点击后触发。

6、函数声明和函数表达式的区别。

function funname(){} 函数声明在编译后函数的声明和他的赋值都会提前，也就是函数声明在函数预处理阶段就完成了，所以只要处于同一作用域内的函数就可以访问，即便在定义前调用他。

var funname = funname(){} 函数表达式编译后变量funname会提前，但是赋值不会提前，调用时才会初始化函数。

7、匿名函数

匿名函数属于函数表达式，匿名函数有很多作用，赋予一个变量则创建函数，赋予一个事件则成为事件处理程序或创建闭包等等。

//赋值给变量
var hereOrThere = function(){
alert("here");
}

//赋值给事件
btn.onclick = function(){}

8、this

this——当前这个元素

his.className——当前这个元素的样式名称

this语法：

span1.onclick=function( ) {
chaCon();
con1.className = “show”;
this.className = “select”;
}

用for循环完成事件的绑定。

var cons = document.getElementById('div');
var spans = document.getElementById('span');
for(var i=0;i<spans.length;i++){
spans[i].onclick = function(){
for(var j=0;j<spans.length;j++){
cons[j].className = '样式';
span[j].className = '样式';
}else{
cons[j].className = '';
span[j].className = '';
}
}
}
}

8、无缝滚动。

scrollLeft 、scrollTop：设置或获取位于对象最顶/左端和窗口中可见内容的最顶/左端之间的距离。即当前上滚或左滚的距离。

scrollHeight、scrollWidth：获取对象可滚动的总高度/宽度

offsetLeft、offsetTop：获取当前对象与父元素之间的距离（不包含父元素的边框）

offsetWidth、 offsetHeight ：获取元素自身的宽度/高度

clientLeft、 clientTop：效果和边框宽度相同，很少使用

clientWidth、 clientHeight ：不含边框的元素自身的宽度/高度

9、时间触发事件的发生。

计时器：

setInterval ( 函数名称 , 毫秒数 ) 表示每经过一定的毫秒后，执行一次相应的函数

setTimeout( 函数名称 , 毫秒数 ) 表示经过一定的毫秒后，只执行一次相应的函数

10、event事件。

event事件兼容
event || window.event

获取鼠标位置
event.clientX            event.clientY

阻止默认事件
event.preventDefault();// 非IE浏览器
window.event.returnValue = false;//IE浏览器