JavaScript知识——事件BOM简介

Posted 七冬与小糖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript知识——事件BOM简介相关的知识,希望对你有一定的参考价值。

事件

事件的委派

事件的委派指的是将事件统一绑定给元素的共同的祖先元素,这样后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先的响应函来处理事件。

例子:
使得添加的超链接和原来的超链接都拥有单击响应事件。

<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        var ul = document.getElementsByTagName("ul")[0];
        btn.onclick = function () {
            var li = document.createElement("li");
            ul.appendChild(li);
            li.innerhtml = "<a href='javascript:;' class='link'>新创建的超链接</a>"
        };

        ul.onclick = function (event) {
            event = event || window.event;

            if(event.target.className == "link"){
                alert("~~")
            }
        };

    };
</script>

<body>
    <button id="btn">添加新的链接</button>
    <br>
    <ul style="background-color: #bfa;">
        <li><a href="javascript:;" class="link"> 超链接</a></li>
        <li><a href="javascript:;" class="link"> 超链接</a></li>
        <li><a href="javascript:;" class="link"> 超链接</a></li>
    </ul>

</body>

事件的绑定

使用 对象.事件 = 函数的形式绑定响应函数,它只能同时为一个元素的一个事件绑定一个响应函数,不能绑定多个,如果绑定多个,则后边的覆盖到掉前边的。

btn.addEventListener()

通过这个方法也可以为元素绑定响应函数,参数:

  1. 第一个参数是事件的字符串,不要on
  2. 回调函数,当事件触发时该函数会被调用
  3. 是否在捕获阶段触发事件,需要一个布尔值,一般为false
<script>
     window.onload = function(){
        var btn = document.getElementById("btn");

        btn.addEventListener("click",function(){
            alert("1");},
            false);
        btn.addEventListener("click",function(){
            alert("2");},
            false);
     };
</script>
<body>
    <button id = "btn">按钮</button>
</body>

这个方法不支持IE8及以下

在IE8中可以使用attachEvent(),但是执行顺序相反。

  1. 第一个参数为事件的字符串,要On
  2. 回调函数

写一个函数使得事件绑定兼容所有的浏览器

function bind(obj, eventStr,callback){
        if(obj.addEventListener){
            obj.addEventListener(obj,callback,false);
        }else{
            //this是谁,由调用方式确定
            //callback.call(obj)
            obj.attachEvent("on"+eventStr,function(){
                callback.call(obj);
            });
        }
     };

拖拽

<script>
    window.onload = function () {
        /*
        *  拖拽box元素:
        *    1、当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
        *    2、当鼠标移动时拖拽元素跟随鼠标移动 onmousemove
        *    3、当鼠标松开时,将拖拽元素固定在当前位置   onomouseup
        * 
        */
        var box = document.getElementById("box");
        box.onmousedown = function (event) {

            //div的偏移量 鼠标.clientX - 元素.offsteleft
            //div的偏移量 鼠标.clientY - 元素.offstetop
            var ol = event.clientX - box.offsetLeft;
            var ot = event.clientY - box.offsetTop;


            document.onmousemove = function (event) {
                //为doncument绑定一个onmouse事件
                event = event || window.event;
                var left = event.clientX - ol;
                var top = event.clientY - ot;

                box.style.left = left + "px";
                box.style.top = top + "px";
            };
            document.onmouseup = function () {
                //取消document.onmousemove事件
                document.onmousemove = null;
                document.onmouseup = null;
            }
        };

    };

</script>
<style>
    #box {
        background-color: red;
        width: 100px;
        height: 100px;
        position: absolute;
    }
</style>

<body>
    <div id="box"></div>
</body>

鼠标滚轮事件

<script>
    window.onload = function () {
        var box = document.getElementById("box");
        box.onwheel = function (event) {
            event = event || window.event;
            if (event.wheelDelta > 0) {
                box.style.height = box.clientHeight - 10 + "px";
            } else {
                box.style.height = box.clientHeight + 10 + "px";
            }
            return false;
        };
    };
</script>

键盘事件

控制box随着键盘移动

document.onkeydown = function (event) {
            var speed = 10;
            if (event.ctrlKey) {
                speed = 50;
            };
            switch (event.keyCode) {
                case 37:
                    box.style.left = box.offsetLeft - speed + "px";
                    break;
                case 39:
                    box.style.left = box.offsetLeft + speed + "px";
                    break;
                case 38:
                    box.style.top = box.offsetTop - speed + "px";
                    break;
                case 40:
                    box.style.top = box.offsetTop + speed + "px";
                    break;

            }
        };

BOM

  • 浏览器对象模型
  • BOM可以通过JS来操作浏览器
  • 在BOM中提供了一组对象,用来对浏览器操作

Window:代表的是整个浏览器的窗口,同时window也是网页的全局对象
Navigator:代表当前浏览器的信息,通过该对象可以识别不同的浏览器
Location:代表当前浏览器的地址栏信息,可以获取地址栏信息,或者操作浏览器跳转页面
History:代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
Screen:代表用户的屏幕的信息,通过该对象可以获得到用户显示器的相关的信息。

以上是关于JavaScript知识——事件BOM简介的主要内容,如果未能解决你的问题,请参考以下文章

前端知识-JavaScript

JavaScript之BOM

JavaScript知识点总结

JavaScript简介

C#-WebForm-JS知识:基础部分BOM部分DOM部分JS事件

必备前端基础知识-第三节3:JavaScript之DOM和BOM