zoukankan      html  css  js  c++  java
  • JavaScript事件及BOM和DOM

    1. 事件

    1.1 事件绑定

    # 写在html元素中
    <button onclick="code..."></div>

    # 把事件当做元素对象的方法
    btnEle.onclick = function(){
       
    }

    # 事件监听
    btnEle.addEventListener('click', function(){
       
    }, false)   fasle表示 冒泡阶段触发(默认)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件的原理</title>
        <style>
            .active {
                background: pink;
            }
        </style>
    </head>
    <body>
        <h1>事件原理</h1>
        <hr>
        <button id="btn">按钮</button>
    
        <script>
            //事件绑定在一个元素上  
            //事件绑定
    
            var btn = document.querySelector('#btn');
    
            // function demo(){
                
            // }
            // 标准的绑定事件 添加事件监听 IE8不兼容   attachEvent('onclick', function)
            // 两次监听都会被捕获到
            btn.addEventListener('click', function(){
                alert(100)
            })
    
            btn.addEventListener('click', function(){
                alert(200)
            })
    
    
            
            //更常用-------把事件当做元素对象的方法
            btn.onclick = function(){
                this.classList.toggle('active');
    
            }
    
    
    
    
    
    
        </script>
    </body>
    </html>
    事件

    1.2 事件的捕获和冒泡

    捕获阶段: 从祖先元素 到 子元素
    冒泡阶段: 从子元素 到 祖先元素
    事件默认在冒泡阶段触发
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件的捕获和冒泡</title>
        <style>
            #wrapper {
                width: 200px;
                height: 200px;
                border: 2px solid pink;
                background-color: #ccc;
            }
            #inner {
                width: 100px;
                height: 100px;
                margin: 50px;
                background: green;
            }
        </style>
    </head>
    <body>
        
        <h1>同志交友</h1>
        <hr>
         <!--捕获阶段: 从祖先元素 到 子元素,=============》冒泡阶段: 从子元素  到 祖先元素 -->
        <div id="wrapper">
            <div id="inner"></div>
        </div>
    
    
        <script>
            //事件只在冒泡阶段触发的
            var wrapperEle = document.querySelector('#wrapper');
            var innerEle = document.querySelector('#inner');
    
    
            wrapperEle.onclick = function(){
                alert('我是大的');     //这是绑定事件执行的动画
            }
    
            innerEle.onclick = function(event) {
                alert('我是小的');
                event.stopPropagation(); //阻止冒泡,这样触发小的事件时就不会影响大的
            }
        </script>
    
    </body>
    </html>
    事件捕获和冒泡
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件的捕获和冒泡</title>
        <style>
            #wrapper {
                width: 200px;
                height: 200px;
                border: 2px solid pink;
                background-color: #ccc;
            }
            #inner {
                width: 100px;
                height: 100px;
                margin: 50px;
                background: green;
            }
        </style>
    </head>
    <body>
        
        <h1>同志交友</h1>
        <hr>
    
        <div id="wrapper">
            <div id="inner"></div>
        </div>
    
    
        <script>
            //默认false时:事件是在冒泡阶段触发的
            var wrapperEle = document.querySelector('#wrapper');
            var innerEle = document.querySelector('#inner');
            
            // 将默认的false给为true,事件的触发就会变为在捕获阶段触发,此时我们在加阻止冒泡也不起作用
            wrapperEle.addEventListener('click', function(){
                alert('我是大的');
            }, true)
    
            innerEle.addEventListener('click', function(event) {
                alert('我是小的');
                event.stopPropagation(); //阻止冒泡
            }, true)
        </script>
    
    </body>
    </html>
    事件在捕获阶段触发

    1.3 常用事件

    鼠标事件

    click       单击
    dblcick 双击
    contextmenu 右击
    mouseenter   mouseover 鼠标悬停
    mouseleave   mouseout   鼠标离开
    mousedown   鼠标按键按下  
    mouseup     鼠标按键抬起
    mousemove   鼠标移动
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
        <style>
            
        </style>
    </head>
    <body>
        <h1>常用事件--鼠标事件</h1>
        <hr>
    
        <script>
            // 绑定给整个document,在窗口的任意位置右击都会触发该事件的执行
            document.oncontextmenu = function(){
                alert('啊,我被右击了');      //当我们鼠标右击,就会弹出对话框
                // return false; //阻止系统菜单
            }
        </script>
    </body>
    </html>
    鼠标事件

    键盘事件

    keydown  键盘按键按下
    keyup   键盘按键抬起
    keypress 按键按下 只有可输入的按键才能触发
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>键盘事件</title>
        <style>
            #box {
                width: 100px;
                height: 100px;
                background: pink;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="box" style="left:100px;top:200px"></div>
    
        <script>
            // 将键盘事件绑定给document,这样我们只要键盘按下该事件就会被触发执行
            document.onkeydown = function(e){
                var boxEle = document.querySelector('#box');
                switch (e.keyCode) {
                    case 37: //左键
                        boxEle.style.left = (parseInt(boxEle.style.left) - 5) + 'px';     //parseInt可以将字符串中的数字转换成数字
                        break;
                    case 38: //上键
                        boxEle.style.top = (parseInt(boxEle.style.top) - 5) + 'px';
                        break;
                    case 39: //右键
                        boxEle.style.left = (parseInt(boxEle.style.left) + 5) + 'px';
                        break;
                    case 40: //下健
                        boxEle.style.top = (parseInt(boxEle.style.top) + 5) + 'px';
                        break;
                    default: 
                        console.log(e.keyCode);       //点击除上下左右键会在控制台打印出该键对应的ASCII码
                }
            }
        </script>
    </body>
    </html>
    键盘事件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>键盘事件</title>
        <style>
            input {
                width: 300px;
                padding: 10px;
                border: 1px solid #ccc;
                font-size: 16px;
            }
    
            #res {
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <!-- 实现的效果是在表单中输入的内容,在表单的下方会同步显示 -->
        <input type="text" id="inputEle">
        <div id="res"></div>
    
        <script>
            // 先获取表单元素
            var inputEle = document.querySelector('#inputEle');
            // 将表单元素绑定给键盘抬起是触发的事件
            inputEle.onkeyup = function(){
                document.querySelector('#res').innerHTML = this.value;   //事件触发执行的函数体代码,获取div元素内容,将获取的表单元素内容赋值给该div元素
            }
        </script>
    </body>
    </html>
    键盘事件2

    表单事件

    blur  失去焦点
    focus 获取焦点
    submit 提交 绑定给form元素
    reset   重置 绑定给form元素
    select 输入框内容被选中
    change 内容改变切失去焦点   适合select 选项以改,触发
    input   输出内容改变 触发
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单事件</title>
    </head>
    <body>
        <form action="1.php" id="myForm">
            用户名: <input type="text" id="userEle" name="username"> <br>    <!--内联元素不换行,所以我们为了达到效果,加了一个换行<br>-->
            密码:   <input type="password" id="pwdEle" name="pwd"> <br>
            <button>提交</button>
            <input type="reset" value="重置">
        </form>
    
    
        <script>
            // 先获取用户输入表单元素和整个表单元素
            var userEle = document.querySelector('#userEle');
            var formEle = document.querySelector('#myForm');
            // 失去焦点也就是鼠标点击输入框然后从输入框移走,点击了输入框以外的其他元素
            userEle.onblur = function() {
                console.log('失去焦点啦');      //失去焦点显示的内容是在控制打印出来的,当然你也可让他在前端页面显示你想要的效果
                // alert('失去焦点')
            }
            // 鼠标光标点击输入款就会获取焦点,在控制塔就会打印出内容
            userEle.onfocus = function() {
                console.log('获取焦点啦');
                //在失去焦点的时候,验证内容合法性
            }
    
            //选中输入框中的文字
            userEle.onselect = function() {
                console.log('啊,我被选了');
            }
    
            //对于输入框,内容改变 并且失去焦点 (没用)
            userEle.onchange = function() {
                console.log('啊,我变了');
            }
    
            //类似于 用的keyup 内容变化就触发   兼容性不好
            userEle.oninput = function(){
                console.log('啊,我变了');
            }
    
    
            //form表单的事件
            formEle.onsubmit = function() {
                alert('啊,我被提交了');
                return false; //阻止表单提交
            }
        </script>
    </body>
    </html>
    表单事件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>地址联动</title>
        <style>
            select {
                width: 100px;
                padding: 5px;
                font-size:16px;
            }
        </style>
    </head>
    <body>
        <h1>选择地址</h1>
        <hr>
        <select id="prov"></select>
        <select id="city"></select>
    
        <script>
            // 实现功能:当我们选中省份,就会显示该省份下下的所有城市
            //定义省市的信息
            var provList = ['江苏','浙江','福建','湖南'];
            var cityList = [];
            cityList[0] = ['南京', '苏州', '宿迁', '扬州'];
            cityList[1] = ['杭州', '温州', '宁波', '台州'];
            cityList[2] = ['福州', '厦门', '泉州', '漳州'];
            cityList[3] = ['长沙', '湘潭', '株洲', '湘西'];
    
            //获取select元素
            var provSelect = document.querySelector('#prov');
            var citySelect = document.querySelector('#city');
    
    
            //把省的信息 添加到第一个select元素中
            provList.forEach(function(val, index){
                //DOM操作  了解
                provSelect.add(new Option(val, index))
            });
    
    
            //给第一个select绑定change事件
            provSelect.onchange = function(){
                //获取 当前的选项
                var index = this.value;
    
                //清空第二个select原先内容
                citySelect.length = 0;
    
                //选择对应的城市列表,添加到第二个select
                cityList[index].forEach(function(val, index){
                    citySelect.add(new Option(val, index));
                })
            }
    
    
            //手工触发一次 change事件
            provSelect.onchange();
    
    
    
    
    
    
        </script>
    </body>
    </html>
    应用:地址联动

    文档事件

    load      绑定给body 绑定给window 绑定给 img 、link、script   文档加载完成
    unload   文档关闭
    beforeunload 文档关闭之前
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文档事件</title>
    </head>
    <body>
        <h1>文档事件</h1>
        <hr>
        <!-- <img src="http://www.google.com/1.jpg" alt=""> -->
    
        <script>
            window.onload = function(){
                //一些操作 必须等到页面中 所有的内容 加载完毕
                console.log('页面加载完毕');
                alert('页面加载完毕')
            }
    
            // 当我们关闭当前页面,就会触发该事件的执行
            window.onbeforeunload = function(){
                return '你确定要离开我码?';       //最新的Chrome不支持显示文字,ie浏览器可以显示文字
            }
        </script>
    </body>
    </html>
    文档事件

    图片事件

    load   图片加载完毕
    error 图片加载错误
    abort 图片加载中断
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片事件</title>
        <style>
            #imgList img {
                width: 200px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <h1>图片事件</h1>
        <hr>
    
        <div id="imgList">
            <img src="../../dist/images_one/1.jpg" alt="">
            <img src="../../dist/images_one/2.jpg" alt="">
            <img src="../../dist/images_one/3.jpg" alt="">
            <img src="../../dist/images_one/4.jpg" alt="">
            <img src="../../dist/images_one/41.jpg" alt="美图">
            <img src="../../dist/images_one/7.jpg" alt="">
            <img src="../../dist/images_one/8.jpg" alt="">
        </div>
    
        <script>
            //获取所有图片的列表img元素
            var imgs = document.querySelectorAll('#imgList img');
    
            //给每个img元素绑定 error 事件-----也就是当图片不存在是,我们为其重新指定一个url地址让其显示一张图片
            for (var i = 0; i < imgs.length; i ++) {
                imgs[i].onerror = function() {
                    this.src = '../../dist/images_two/11.jpg'
                }
            }
        </script>
    </body>
    </html>
    图片事件

    其他事件

    scroll   滚动
    resize   大小调整
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>其他事件</title>
    </head>
    <body>
        <div style="height:20000px"></div>
        <script>
            // 将窗口绑定给滚动事件,当我们滚动滚动条,就会执行function内的函数体代码
            window.onscroll = function(){
                console.log('页面在滚动');
            }
    
            // 将窗口对象绑定给调整窗口大小的事件,当调整窗口大小时就会触发事件的执行
            window.onresize = function(){
                console.log(window.innerWidth, window.innerHeight)
            }
        </script>
    </body>
    </html>
    其他事件

    1.4 Event对象 事件对象

    属性
    clientX 鼠标的坐标
    clientY 鼠标的坐标
    keyCode 键盘的按键 ascii码
    button   鼠标按键 0 1 2
    target   返回元素 具体触发的元素

    方法
    stopPropagation() 阻止事件冒泡
    preventDefault()   阻止元素的默认事件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件对象</title>
    </head>
    <body>
        <h1>event对象</h1>
        <hr>
        <form action="1.php">
            <button id="btn">按钮</button>
        </form>
        <script>
            // 先获取按钮元素
            var btn = document.querySelector('#btn');
    
            // 将元素对象绑定给单机按钮事件,当我们单机按钮时就会触发事件的执行
            btn.onclick = function(event){
                alert('啊,我被点击了');
                event.preventDefault(); //阻止元素的 默认动作就是当我们点击时就会跳转到一个新的页面,设置阻止元素的跳转,当我们在点击也不会跳转到新的页面
            }
    
            // event对象的target属性,就是当我们点击窗口的任意地方就会显示该地方所包含的元素内容
            document.onclick = function(event) {
                console.log(event.target)
            }
        </script>
    </body>
    </html>
    事件对象event

    2. BOM 浏览器对象模型

    2.1 window

    #属性
    window.innerWidth   窗口的宽
    window.innerHeight 窗口的高
    history
    location
    screen
    navigator

    # 方法
    setInterval()
    clearInterval()
    setTimeout()
    clearTimeout()
    Number()
    String()
    Boolean()
    alert()
    confirm()
    prompt()

    2.2 history

    属性
    length  

    方法
    back() 后退一步
    forward() 前进一步
    go(1) 前进/后退 n 步
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>window</title>
    </head>
    <body>
        <button onclick="history.back()">上一步</button>
        <button onclick="history.forward()">下一步</button>
        <button onclick="history.go(-2)">上两步</button>
        <button onclick="history.go(1)">下1步</button>
    
        <hr>
    
        <a href="http://www.baidu.com">百度</a>
    
        <script>
            console.log(history)
            console.log(window.history)
    
    
            console.log(history.length); //历史记录的长度
    
        </script>
    </body>
    </html>
    bom-history

    2.3 location

    属性
    href
    protocol
    host
    hostname
    port
    pathname
    search
    hash
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>location</title>
    </head>
    <body>
        <script>
            console.log(location)          
            console.log(location.href)     //返回完整的URL
            console.log(location.protocol) //返回一个URL协议
            console.log(location.host);  //主机名和端口
            console.log(location.hostname) //返回URL的主机名
            console.log(location.port)  //返回一个URL服务器使用的端口号
            console.log(location.pathname) //返回URL的路径名
            console.log(location.search) //返回URL查询部分,就是url地址中?后面的部分
            console.log(location.hash)  //返回一个URL的锚部分,就是url地址中,#后面的部分
    
    
            location.href= "1.html"       //可以修改url地址
            location.hash = '#哈哈哈'   //可以修改url地址中的hash值
        </script>
    </body>
    </html>
    bom-location

    2.4 screen

    屏幕

    2.5 navigator

    属性
    userAgent
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>navigator</title>
    </head>
    <body>
        <script>
            console.log(navigator.userAgent)         //查看浏览器的版本信息
        </script>
    </body>
    </html>
    bom-navigator

    3. DOM 文档对象模型

    3.1 常见的dom对象

    所有的元素对象 都是dom
    document dom对象 表示整个文档
    document.body 获取body元素
    document.documentElement 获取HTML元素

    3.3 元素内容

    innerHTML
    innerText
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
        <style>
            #box {
                padding: 20px;
                width: 600px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <p>Lorem ipsum dolor sit amet.</p>
            <p>Lorem ipsum dolor sit amet.</p>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    
    
        <script>
            // 先获取元素
            var box = document.querySelector('#box');
            // 显示的双标签,以及双标签中的内容
            console.log(box.innerHTML)
            // 只显示双标签中的内容
            console.log(box.innerText)
    
    
            box.innerHTML = '<ul><li>HELLO</li></ul>'             //将获取的元素内容改成HELLO,而不是原样输出'<ul><li>HELLO</li></ul>'  
            // box.innerText = '<ul><li>HELLO</li></ul>'         //会原样输出'<ul><li>HELLO</li></ul>' 
        </script>
    </body>
    </html>
    DOM
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>todoList</title>
        <style>    
            #todoList {
                list-style: none;
                margin:10px 0px;
                padding:0;
                width:600px;
            }
            #todoList li {
                margin-bottom:5px;
                padding: 10px;
                border: 1px solid #ccc;
                background:#f5f5f5;
                position: relative;
            }
            input {
                padding:10px;
                font-size:16px;
                border:1px solid #ccc;
            }
            button {
                padding:10px 20px;
                border:1px solid #ccc;
                background: #f5f5f5;
                outline: none;
                cursor: pointer;
            }
    
            #todoList span {
                position: absolute;
                right: 10px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <input type="text" id="content"> 
        <button id="btn">添加</button>
        <ul id="todoList">
            <li>去钓鱼 <span>&times;</span></li>
            <li>去洗澡 <span>&times;</span></li>
            <li>去吃饭 <span>&times;</span></li>
            <li>去睡觉 <span>&times;</span></li>
        </ul>
    
    
        <script>    
            // 实现功能:在输入框中输入的内容,可以在下面按照我们想要的格式原样输出,并且可以通过叉号将其删除
            // 先获取以下四个元素
            var input = document.querySelector('#content');
            var btn = document.querySelector('#btn');
            var todoList= document.querySelector('#todoList');
            var spans = document.querySelectorAll('#todoList span');
    
    
            btn.onclick = function(){
                //获取 input的内置
                var text = input.value;
    
                //创建li元素 并给li元素添加包裹 内容
                var li = document.createElement('li');
                li.innerText = text;
                var span = document.createElement('span');
                span.innerHTML = '&times;';
                li.appendChild(span);
    
                //把li元素添加到ul中
                todoList.appendChild(li);
            }    
    
    
            /*spans.forEach(function(span){
                span.onclick = function(){
                    todoList.removeChild(this.parentNode)
                }
            })*/
    
            //委派方式绑定
            todoList.onclick = function(event) {
                if (event.target.nodeName === 'SPAN') {
                    this.removeChild(event.target.parentNode);
                }
            }
        </script>
    </body>
    </html>
    纯DOM操作
  • 相关阅读:
    Swift 正式开源, 包括 Swift 核心库和包管理器
    Swift 3 新特性
    iOS10 CoreData新特性
    iOS各个版本的新特性介绍
    iOS WKWebView详解
    Swift XML解析库
    ios辅助功能之voiceover实战
    iOS 内存管理机制和循环引用处理方法
    Swift 关键字汇总
    Swift 自动布局框架-SnapKit
  • 原文地址:https://www.cnblogs.com/sui776265233/p/9475535.html
Copyright © 2011-2022 走看看