JS13

this的使用

1.给一组元素绑定事件

        for(var i = 0;i

                lis[i].onclick=function(){

                console.log(i);

                this.style.backgroundColor=”red”;

        }

}

2. 在元素内部通过事件属性使用

       

        function change(ob){ob.style.color='red'}

事件列表

1.鼠标事件

        1.onclick 单击

        2.ondblclick 双击

        3.oncontextmenu右击 --return false 阻止系统菜单弹出

    自定义右键菜单

---

                1.event对象

                2.client.X  client.Y

                3.window.innerWidth  window.innerHeight

                4.document.documentElement.clientWidth;

                5.document.documentElement.clientHeiht;

---

        4.onmouseover 鼠标滑上元素 --导航条

        5.onmouseout 鼠标移出元素

        6.onmousedown 鼠标按下

                box.onmousedown=function(en){

                        var env = en || window.event;

                        switch (env.button){

                                console.log(env.button);    

                        }

               }

        7.onmouseup 鼠标抬起

        8.onmousemove 鼠标移动

                box.onmousemove=function(en){

                        var env = en || window.event;

                        //获取鼠标的坐标

                        var X = env.clientX;

                        var Y = env.clientY;

                       //获取box的位置  --offsetLeft相对于定位的父级

                       var left  = this.offsetLeft;

                       var top  = this.offsetTop;

                      //得到鼠标在box上的位置

                       var x = X-left;  var y = Y-top;

                }

2. 键盘事件

        onkeydown 键盘按下

        onkeyup 键盘抬起

        onkeypress 键盘按下---可打印的(可见的)

                document.onkeydown=function(en){

                         var e = en || window.event;

                         var char = String.fromCharCode(e.keyCode);

                         返回ASCII表的字母(大写)

                }

3. 文档事件

        onload 文档中的一切加载完成（可以使代码放在元素前面）

        onunload 文档关闭的时候(w3c里有标准但是浏览器不支持)

        onbeforeunload 文档关闭之前

    body window的兼容和冲突

            window.onload=function(){

                    alert(1);

            };

    浏览器支持较差

            window.onbeforeunload = function(){

                    return "别走";  //页面刷新的时候提醒

            }

4. 表单事件

        1.onsubmit --- 提交

                document.myForm.onsubmit=function(){

                        return false;  不提交

                       //return true;  提交

                }

        2.onreset --- 重置

                  doucment.myform.onreset=function(){

                          return false ;    不重置

                          //return true;        重置

                  }

       3.onfocus -- 获取焦点

                 inp.onfocus=function(){

                           this.style.backgroundColor='blue';

                 }

        4.onblur ---失去焦点

                使用onblur验证表单（提高用户体验）

        5.onchange ---内容发生改变(失去焦点)

                input.onchange = function(){

                      document.getElementById('box').innerHTML = this.value;

               }

        实例：地址联动

        6.onselect ---当内容被选择(表单)

                textarea.onselect = function(){

                        alert('选中了');

                }

5. 图片事件

        onload ---加载完成

               

        onerror ---加载失败

                img.onerror = function(){this.src = "error.jpg";}

        onabort ---加载中断