JavaScript知识——事件、BOM简介

最新推荐文章于 2022-07-27 00:08:23 发布

七冬与小糖

最新推荐文章于 2022-07-27 00:08:23 发布

阅读量342

点赞数 1

分类专栏：前端知识菜鸟入门 JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/xiaotangyu7dong/article/details/119750388

版权

菜鸟入门同时被 3 个专栏收录

79 篇文章 3 订阅

订阅专栏

前端知识

26 篇文章 3 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

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()

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

第一个参数是事件的字符串，不要on
回调函数，当事件触发时该函数会被调用
是否在捕获阶段触发事件，需要一个布尔值，一般为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（），但是执行顺序相反。

第一个参数为事件的字符串，要On
回调函数

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

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:代表用户的屏幕的信息，通过该对象可以获得到用户显示器的相关的信息。

七冬与小糖

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
JavaScript知识——事件、BOM简介

JavaScript知识事件事件的委派事件的绑定拖拽鼠标滚轮事件键盘事件BOM事件事件的委派事件的委派指的是将事件统一绑定给元素的共同的祖先元素，这样后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先的响应函来处理事件。例子：使得添加的超链接和原来的超链接都拥有单击响应事件。<script> window.onload = function () { var btn = document.getElementById("btn"); v
复制链接

扫一扫

专栏目录