当前位置:首页 > 网站技术 > 前端技术 > 正文内容

前端入门html、css、js知识汇总(2)

binadmin2020-06-19前端技术97
68.ECMAScript{
  简单数据类型:undefined,null,boolean,number,string
  复杂数据类型:object
ECMAScript6:symbol
undefined是null派生出来的,所以undefined==null =>true
NaN是一个特殊的数值,任何涉及NaN的操作都返回NaN
NaN与任何值都不相等,包括NaN本身
69.isNaN(n):检测n是否是“非数值”
有三个函数可以把非数值转换为数值:Number(),parseInt(),parseFloat()
Number():可以用于任何数据类型
parseInt()和parseFloat()则专门用于把字符串转换成数值
parseInt():转换空字符串返回NaN;提供第二个参数:转换时使用的基数(几进制)
70.sr.toString():将str转换为字符串
71.除0之外的所有数字,转换为布尔型都为true
除''之外的所有字符,转换为布尔型都为true
null和undefined转换为布尔值为false
72.&&:在有一个操作数不是布尔值的情况,逻辑与操作就不一定返回值
此时他遵循以下规则
1.如果第一个操作数隐式类型转换后为true,则返回第二个操作数
2.如果第一个操作数隐式类型转换后为false,则返回第一个操作数
3.如果有一个操作数为null/NaN/undefind,则返回null/NaN/undefind
73.||:在有一个操作数不是布尔值的情况,逻辑或操作就不一定返回值
此时他遵循以下规则
1.如果第一个操作数隐式类型转换后为true,则返回第一个操作数
2.如果第一个操作数隐式类型转换后为false,则返回第二个操作数
3.如果两个操作数为null/NaN/undefind,则返回null/NaN/undefind
74.任何函数通过return语句,后面跟着返回的值来实现返回值
1.函数会在执行完return语句后停止并立即退出
2.return语句也可以不带有任何返回值,用于提前停止函数执行又不需要返回值的情况。
75.arguments对象(重点):类似数组访问ECMAScript参数
76.for适合已知循环次数的循环体
  while适合未知循环次数的循环体
77.array数组操作语法:
    push()是把新的参数添加到数组的尾部,返回值是数组的新长度;
    unshift()是把新的参数添加到数组的最前面,返回值是数组的新长度;
    pop():删除最后一个元素,返回被删除的元素
    shift():删除第一个元素,返回被删除的元素
    join():把数组所有元素放入一个字符串,返回字符串
    reverse():用于颠倒数组中元素的顺序,返回颠倒后的数组
    sort():对数组的元素进行排序,返回值为数组
            注意:即使数组中每一项都是数值,sort()方法比较的都是字符串
            如果要对数值进行比较:
            升序:arr.sort(function(a,b){return a-b})
            降序:arr.sort(function(a,b){return b-a})
    concat():用于连接多个数组,返回合并后的数组
    slice(start,end):是从已有的数组中返回选定的元素,原有的数组不会发生变化,返回值是一个新的数组
          start:必须,规定从何处开始选取,如果为负数,就从数组尾部开始算
          end:可选,规定从何处结束选取,是数组结束处的数组下标
          如果没有指定end,截取的元素包含从start至数组结束的所有元素
          start为负数时,则用数组的长度加上该数来确定相应位置
    splice(index,count):删除从index处开始的元素,返回被删除元素的数组
          count:为要删除的项目数量,如果为0,则不会删除元素,此时返回的是空数组,如果不写,则删除从index开始的所有元素
    splice(index,0,item1,...,itemX):在指定位置插入值
    index:起始值 0:要删除的项数 item1,...,itemX:插入的项   返回新的数组
    indexOf(val,index):从数组下标为0的元素开始向后查找,返回查找的项在数组中的位置,如果没有返回-1
    val:必需,要查找的项
    index(可选):起点位置的索引
    lastIndexOf(val,index):从数组末端元素开始向前查找,返回查找的项在数组中的位置,如果没有返回-1
    val:必需,要查找的项
    index(可选):起点位置的索引
78.string字符串操作语法:
    charAt(index):返回string中index位置的字符。
    charCodeAt(index):返回string中index位置字符的字符编码
    indexOf():返回某个指定的字符串值在字符串中首次出现的位置,没有找到返回-1
    lastIndexOf():返回某个指定的字符串值在字符串中最后出现的位置,在一个字符串中的指定位置从后向前搜索
    slice(start,end): start必需,指定子字符串的开始位置,
    end,可选,表示子字符串到哪结束,end本身不在截取范围内,省略时截取字符串的末尾,
    当两个参数为负值的时候,与字符串的长度相加,得到的就是字符串截取的开头和结尾的位置
    substring():和slice雷同。会将较小的数作为开始位置,将较大的数作为结束位置
    注意:它有两个参数,当这两个参数的值为负数的时候,将自动转换为0。,自动将参数转换为0
    substr(start,length):截取字符串
    start:必需,指定字符串开始位置
    length:可选,表示截取的字符总数,省略时截取至字符串末尾
    当start为负数时,会将传入的负值与字符串长度相加
    当length为负数时,返回空字符串
    split(sep):把一个字符串分割成字符串数组,返回字符串,sep:必需,分隔符
    replace(regexp/substr,replacement):在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的字符串
    返回值为string
    regexp:必需,规定子字符串或要替代的模式的regexp对象
    replacement:必需,一个字符串值
 
    toUpperCase():把字符串转换为大写
    toLowerCase():把字符串转换为小写
79.使用try catch语句输出运行不可避免的错误
    try{
      //如果颞部代码抛出错误,则代码直接跳入catch,
      //且把错误对象赋值给catch中的变量e
    }catch(e){
     
    }finally(){
      //做一些清理的工作
      //finally块是一定会执行的
    }
    主动触发错误:throw语句
  80.Math对象:
     Math.min():返回一组数中最小值
     Math.max():返回一组数中最大值(如果有字符串,返回NaN)
     Math.ceil(num):向上取整,返回大于num的最小整数
     Math.floor(num):向下取整,返回num的整数部分
     Math.round(num):返回num四舍五入的整数
     Math.abs(num):返回num的绝对值
     Math.random():返回大于等于0小于1的随机数
     Math.pow(x,y):返回x的y次方
     求n到m之间的随机整数的公式:
      random=Math.floor(Math.random()*(m-n+1)+n);
  81:日期对象:new Date()
     getFullYear():返回4位数的年份
     getMonth():返回日期中的月份,(0-11)
     getDate():返回月份中的某一天
     getDay():返回星期(0-6)
     getHours():返回小时
     getMinutes():返回分
     getSeconds():返回秒
     getTime():返回日期的毫秒数,时间戳
 
     setFullYear():设置4位数的年份
     setMonth():设置日期中的月份,(0-11)
     setDate():设置月份中的某一天
     setDay():设置星期(0-6)
     setHours():设置小时
     setMinutes():设置分
     setSeconds():设置秒
     setTime():设置日期的毫秒数,时间戳
82:鼠标事件:onloand:页面加载完成之后立即触发
    onclick:鼠标点击时触发
    onmouseover:鼠标滑过时触发
    onmouseout:鼠标离开时触发
    onfocus:获得焦点时触发
    onblur:失去焦点时触发
    onchange:域的内容改变时触发
    onsubmit:表单中确认按钮被点击时发生
    onmousedown:鼠标按钮在元素上按下时触发
    onmousemove:鼠标移动时发生
    onmouseup:在元素松开鼠标按钮时触发
    onresize:当调整浏览器窗口大小时触发
    onscroll:拖动滚动条滚动时触发
    onkeydown:在用户按下一个键盘按键时发生
    onkeypress:在按下键盘按键时发生(只会响应字母与数字符号)
    onkeyup:在键盘按键被松开时发生
    keyCode:返回onkeydown,onkeypress,onkeyup事件触发的键的值的字符代码,或键的代码
    全局变量和全局函数都被归在了window上,全局变量可以用window . 变量名,也可以用var声明,全局函数可以用window . 函数名,也可以用function声明
83.window事件:window.prompt('title','输入内容')  BOM
    window.open(子窗口文件名/路径,子窗口名称,窗口参数):打开新的浏览器窗口
    window.close()关闭浏览器窗口
    window.innerHeight():获取窗口文档显示区的高度
    window.innerWidth():获取窗口文档显示区的宽度
    setTimeout(function,time) 指定毫秒数后调用函数或表达式
    clearTimout(timoutId):取消timeoutId的setTimeout  
    //注var 赋值null,即释放内存
    location.href 返回当前页的完整Url
    location.hash:返回URL中的hash(#号后的字符),如果没有则返回空
    location.host:返回服务器名称和端口号
    location.hostname:返回不带端口号的服务器名称
    location.pathname:返回URL中的目录或文件名
    location.port:返回URL中指定的端口号,没有则返回空
    location.protocol:返回页面中使用的协议
    location.search:返回URL的查询字符串,以问号开头
    location.replace(url):重定向URL,不会在历史记录中生成新的记录
    location.reload():重新加载当前页面(有可能从缓存中加载)==>等同于f5
    location.reload(true):从服务器重新加载==>等同于ctrl+f5
 
    history.back()==history.go(-1):回到历史的上一步
    history.forward()==history.go(1):回到历史的下一步
    history.go(-n)&history.go(n):回到历史的前n步&回到历史的后n步
 
    screen.availWidth():返回屏幕可用宽度
    screen.availHeight():返回屏幕可用高度
 
    Navigator.UserAgent:用来识别浏览器名称、版本、引擎、操作系统等信息的内容
 
 //a锚点动画效果
   $(".point-item a").mouseenter(function () {
         var hrefs=$(this).attr("href");
         var hrefsTwo=$(hrefs).offset().top-290
         $("html, body").animate({scrollTop:hrefsTwo+ "px"}, 500);
    });

84、ele.nodeType 返回节点类型

      ele.nodeName返回节点名字

     ele.nodeValue返回节点值

     目前所有主流浏览器都支持nodeType属性

QQ浏览器截图20200606222812.png

使用方法:

QQ浏览器截图20200606221347.png


85、节点类型判断


节点类型 数值常量    字符常量  
Elment(元素节点) 1ELEMENT_NODE    
Attr(元素节点)2ATTRIBUTE_NODE    
Text(节点)3TEXT_NODE    
Comment(注释节点)8COMMENT_NODE   
Document(文档节点)9DOCUMENT_NODE  
DocumentType(文档类型节点)10DOCUMENT_TYPE_NODE   
DocumentFragment(文档片段节点)11DOCUMENT_FRAGMENT_NODE  

四个方法:isElement,isHtml,isXml,cotain

86、浏览器渲染引擎的过程

QQ浏览器截图20200606222918.png

87、webkit渲染流程

QQ浏览器截图20200606223117.png

88、DOM节点继承层次

QQ浏览器截图20200606223813.png


89、DoMReady实现策略

在页面的DOM树创建完成后(也就是HTML解析第一步完成)即
触发,而无需等待其他资源的加载。即DOMReady实现策略:
1、支持DOMContentLLoaded事件的,就使用DOMContentLoaded事件
2、不支持的,就使用来自Diego Perini发现的著名Hack兼容。兼容原
理大概就是,通过IE中的document.documentElement.doScroll('left')
来判断DOM树是否创建完毕。

function myReady(fn){
 
    //对于现代浏览器,对DOMContentLoaded事件的处理采用标准的事件绑定方式
    if ( document.addEventListener ) {
        document.addEventListener("DOMContentLoaded", fn, false);
    } else {
        IEContentLoaded(fn);
    }
 
    //IE模拟DOMContentLoaded
    function IEContentLoaded (fn) {
        var d = window.document;
        var done = false;
 
        //只执行一次用户的回调函数init()
        var init = function () {
            if (!done) {
                done = true;
                fn();
            }
        };
 
        (function () {
            try {
                // DOM树未创建完之前调用doScroll会抛出错误
                d.documentElement.doScroll('left');
            } catch (e) {
                //延迟再试一次~
                setTimeout(arguments.callee, 50);
         //arguments.callee  函数本身
                return;
            }
            // 没有错误就表示DOM树创建完毕,然后立马执行用户回调
            init();
        })();
 
        //监听document的加载状态
        d.onreadystatechange = function() {
            // 如果用户是在domReady之后绑定的函数,就立马执行
            if (d.readyState == 'complete') {
                d.onreadystatechange = null;
                init();
            }
        }
    }
}

 

90. create创建节点的方法:

document.createElement()
document.createTextNode()
document.createDocumentFragment()
document.createComment()

document.createElement()还能支持创建当前浏览器不支持的标签名

在IE6-8下,还是一个著名的hack


91. 高效创建节点的方法:

innerHTML:用来设置或获取当前标签的起始和结束里面的内容


使用innerHTML的限制
字符串的最左边不能出现空白,IE6-8会自动移除掉它
大多数浏览器不会对script标签进行脚本执行操作 不能单独创建
meta, style, link等元素,一定要在前面加上一些字符

outerHTML:返回调用它的元素及所有子节点的HTML标签

innerText:设置或获取位于对象起始和结束标签内的文本

outerText(不建议使用该属性)

92、节点遍历


93、NodeList对象的特点

NodeList 是一种类数组对象,用于保存一组有序的节点

可以通过方括号语法来访问 NodeList 的值,有item 方法与length 属性

它并不是 Array 的实例,没有数组对象的方法

94、类数组对象HTMLCollection

Ele.getElementsByTagName()

document.scripts

document.links

document.images

document.forms

tr.cells

select.options

95、类数组对象NamedNodeMap

Ele.attributes返回的是属性值

 

数组对象NodeList, HTMLCollection以及NamedNodeMap :数组对象返回的是

一些对象的集合,拥有length属性和item方法,但是它们不是数组对象。

 类数组对象中可以通过item()方法来获取集合中指定位置的对象

 QQ浏览器截图20200606224635.png

96、DOM创建节点

DOM 节点就是 HTML 上所有的内容 ,包括 :

 文档节点

 元素节点(标签)

 元素属性节点

 文本节点

 注释节点

以下总结一些常用的 DOM 操作 :

document.createElement('元素名');  创建新的元素节点

document.createAttribute('属性名');  创建新的属性节点

document.createTextNode('文本内容');  创建新的文本节点

document.createComment('注释节点');  创建新的注释节点

document.createDocumentFragment( ); 创建文档片段节点

97、DOM节点查找

 getElementById()

 getElementsByName()

 getElementsByTagName()

 getElementsByClassName()

 querySelector()

 querySelectorAll()

98、操作DOM节点的方法

appendChind()  为指定元素节点的最后一个子节点之后添加节点。该方法返回新的子节点

insertBefore()  在指定的已有子节点之前插入新的子节点

replaceChild()  该方法用新节点替换某个子节点 有两个参数:

                          ----replaceChild(要插入的节点,被替换的节点)

                         返回被替换的节点

cloneNode()  创建节点的拷贝,返回该副本。如果没有父节点,要通过appendChild()、

                       insertBefore()、replaceChild()等方法对齐进行添加

normalize()  合并相邻的text节点

splitText()   按照指定的位置把文本节点分割为两个节点,并返回新的文本节点

99、删除节点的方法

removeChild():删除某个节点中指定的子节点

 removeNode(): IE的私有实现

 将目标节点从文档中删除,返回目标节点

 参数是布尔值,默认值是false

 innerHTML

 deleteContents()

 textContent

100、修复getElementById()在IE八以下获取出现bug问题

if(!+"\v1"){

  为真,则是IE浏览器,因为IE不会转义,

 

}else{

  为假,是其他浏览器,“!+"1"”=>false

}

101、DOM属性

属性:Property(固有属性),Attribute(自定义属性)

QQ浏览器截图20200606225838.png


布尔属性:checked,selected,readonly,disable,multiple,hidden,contentEditable,async

字符串属性:id,title,href,src,lang,dir,accesskey,name,value,class

w3c全局属性:accesskey、classs、contentditable、dir、hidden、id、

lang、spellcheck、style、tabindex、title、translate(暂不支持)

data属性:定义data-xxx-yyy,data-toggle 获取ele.dataset.toggle,ele.dataset.xxxYyy

class属性:

QQ浏览器截图20200606230837.png


102、js事件周期

解释器创建一个event对象后,会按如下过程将其在HTML元素间进行传播
第一阶段:事件捕获,事件对象沿DOM树向下传播
第二阶段:目标触发,运行事件监听函数
第三阶段:事件冒泡,事件沿DOM树向上传播

QQ浏览器截图20200606231301.png

示例:代码实现点击ul的哪个儿子就输出哪个
ul.addEventListener("click", function(event) {
        if(event.target.id == "one") {
          alert(1)
        } else if(event.target.id == "two") {
          alert(2)
        } else if(event.target.id == "thr") {
          alert(3)
        } else if(event.target.id == "four") {
          alert(4)
        } else if(event.target.id == "fiv") {
          alert(5)
        } else {
          alert(6)
        }
      }, false);

103、事件句柄

事件句柄(又称事件处理函数、事件监听函数),指用于响应

某个事件而调用的函数。每一个事件均对应一个事件句柄,在

程序执行时,将相应的函数或语句指定给事件句柄,则在该事

件发生时,浏览器便执行指定的函数或语句。

 

104、事件的定义

为特定事件定义监听函数有三种方式:

(1)、直接在HTML中定义元素的事件相关属性

<button onclick="alert('hello')">按钮</button>
<body onload="init()">...</body>

缺点:违反了“内容与行为相分离”的原则,应尽可能少用。

(2)、DOM0级事件

在JavaScript中为元素的事件相关属性赋值:
document.getElementById("btn").onclick = function(){ // ...}
document.body.onload = init;
function init(){ // ...}

缺点:此语法实现了“内容与行为相分离”,但元素扔只能绑定一个

监听函数。

(3)、DOM2级事件

高级事件处理方式,一个事件可以绑定多个监听函数:

btn.addEventListener("click",function(){},false); // DOM
btn.attachEvent("onclick",function(){}); // IE
document.body.addEventListener("load",init);
document.body.attachEvent("onload",init);
function init(){ //... }

此语法可以为一个元素绑定多个监听函数,但需要注意浏览器兼容性问题


DOM0级与DOM2级区别:

1、DOM2支持同一dom元素注册多个同种事件。

2、DOM2新增了捕获和冒泡的概念。


DOM2添加事件:

addEventListener()
语法:element.addEventListener(event, function, useCapture)
功能:用于向指定元素添加事件句柄
参数:
event : 必须。字符串,指定事件名。
function:必须。指定要事件触发时执行的函数。
useCapture:可选。布尔值,指定事件是否在捕获或冒泡阶段执行。


DOM2移除事件:

removeEventListener()
语法:element. removeEventListener(event, function,
useCapture)
功能:移除 addEventListener() 方法添加的事件句柄。
参数:
event : 必须。字符串,要移除的事件名称。
function:必须。指定要移除的函数。
useCapture:可选。布尔值,指定移除事件句柄的阶段。


105、IE事件流(IE事件处理程序)

添加事件:

attachEvent() 
语法:element.attachEvent(event, function) 
功能:用于向指定元素添加事件句柄
参数:
event : 必须。字符串,指定事件名,必须加“on”前缀。
function:必须。指定要事件触发时执行的函数。

移除事件:

detachEvent()
语法:element.detachEvent(event, function)
功能:移除 attachEvent() 方法添加的事件句柄。
参数:
event : 必须。字符串,要移除的事件名称。
function:必须。指定要移除的函数。

事件处理机制:IE是事件冒泡、firefox同时支持两种事件模型,也就是:捕获型事件和冒泡型事件

兼容所有浏览器的绑定和删除事件代码

 var EventUtil = {
        addHandler:function(element,type,handler){
          //绑定事件
          //Chrome Firefox IE9等     addEventListener
          //IE8及IE8以下的浏览器     attachEvent
          if(element.addEventListener){
            element.addEventListener(type,handler,false);
          }else if (element.attachEvent) {
            element.attachEvent("on"+ type,handler);
          } else{
            element["on"+type] = handler
          }
        },
        removeHandler: function(element,type,handler){
          //移除事件
          //Chrome Firefox IE9等     
          //IE8及IE8以下的浏览器    
          if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
          }else if (element.detachEvent) {
            element.detachEvent("on"+type,handler);
          } else{
            element["on"+type] = handler
          }
        }
      }

106、event对象常用属性和方法

 type:事件的类型;
 srcElement/target:事件源,点击谁就输出谁,就是发生事件的元素; 
 currentTarget:事件绑定在谁身上,就输出谁。
 cancelBubble:布尔属性,设为true的时候,将停止事件进一步起泡到
 包容层次的元素;(e.cancelBubble = true; 相当于e.stopPropagation(););
 returnValue:布尔属性,设置为false的时候可以组织浏览器执行默认
 的事件动作;(e.returnValue = false; 相当于 e.preventDefault(););
 
 clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档
 区域的左上角的位置;
 offsetX,offsetY:事件发生的时候,鼠标相对于事件源元素左上角
 的位置;
 说明: event 对象的所有属性列表可以在浏览器控制台中输出查看。
 
 
 在IE8以下浏览器的Event对象属性与办法
 阻止默认行为 等同于 preventDefault 
 event.returnValue = false
 
 event.srcElemnt
 
 cancelBubble

107、事件列表

移动端事件

touchstart:手指触摸屏幕。
touchmove:手指在屏幕上滑动。
touchend:手指从屏幕上移开


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


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


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


滚动字幕事件
onbounce
在 Marquee 内的内容移动至 Marquee 显示范围之外时触发此事件
onfinish
当 Marquee 元素完成需要显示的内容后触发此事件
onstart 当 Marquee 元素开始显示内容时触发此事件


外部事件
onafterprint 当文档被打印后触发此事件
onbeforeprint 当文档即将打印时触发此事件
onfilterchange 当某个对象的滤镜效果发生变化时触发的事件
onhelp
当浏览者按下 F1 或者浏览器的帮助选择时触发此事件
onpropertychange 当对象的属性之一发生变化时触发此事件
onreadystatechange 当对象的初始化属性值发生变化时触发此事件


数据绑定

onafterupdate  当数据完成由数据源到对象的传送时触发此事件

oncellchange  当数据来源发生变化时

ondataavailable  当数据接收完成时触发事件

ondatasetchanged  数据在数据源发生变化时触发的事件

ondatasetcomplete  当来子数据源的全部有效数据读取完毕时触发此事件

onerrorupdate

当 使 用 onBeforeUpdate 事 件 触 发 取 消 了 数 据 传 送 时 , 代 替

onAfterUpdate 事件

onrowenter   当前数据源的数据发生变化并且有新的有效数据时触发的事件

onrowexit  当前数据源的数据将要发生变化时触发的事件

onrowsdelete  当前数据记录将被删除时触发此事件

onrowsinserted  当前数据源将要插入新数据记录时触发此事件


编辑事件

onbeforecopy    当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件

onbeforecut   当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏

览者的系统剪贴板时触发此事件

onbeforeeditfocus  当前元素将要进入编辑状态

onbeforepaste    内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件

onbeforeupdate  当浏览者粘贴系统剪贴板中的内容时通知目标对象

oncontextmenu

当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单

时触发的事件

oncopy  当页面当前的被选择内容被复制后触发此事件

oncut  当页面当前的被选择内容被剪切时触发此事件

ondrag  当某个对象被拖动时触发此事件 [活动事件]

ondragdrop  一个外部对象被鼠标拖进当前窗口或者帧

ondragend  当鼠标拖动结束时触发此事件,即鼠标的按钮被释放了

ondragenter  当对象被鼠标拖动的对象进入其容器范围内时触发此事件

ondragleave  当对象被鼠标拖动的对象离开其容器范围内时触发此事件

ondragover  当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragstart  当某对象将被拖动时触发此事件

ondrop  在一个拖动过程中,释放鼠标键时触发此事件

onlosecapture  当元素失去鼠标移动所形成的选择焦点时触发此事件

onpaste  当内容被粘贴时触发此事件

onselect  当文本内容被选择时的事件

onselectstart  当文本内容选择将开始发生时触发的事件


标签: javascript
分享给朋友:

相关文章

HTTP之协议结构、通讯原理以及http特性和使用方法

HTTP之协议结构、通讯原理以及http特性和使用方法

1、http协议 超文本传输协议(http)是一种通信协议,它允许将超文本标记语言(html)文档从web服务器传送到客户端的浏览器http是一个属于应用层的面向对象的协议web是一种基于超...

浏览器几种缓存方法的比较

浏览器几种缓存方法的比较

在Web应用领域,Web缓存大致可以分为以下几种类型:1.数据库数据缓存Web应用,特别是社交网络服务类型的应用,往往关系比较复杂,数据库表繁多,如果频繁进行数据库查询,很容易导致数据库不堪重荷。为了...

5种常见网页自动跳转方法

5种常见网页自动跳转方法

利用HTML标记(META中的REFRESH属性)用HTML标记,就是用META的REFRESH标记,举例如下:<meta http-equiv=refresh content="10...

SEO搜索引擎工作原理

SEO搜索引擎工作原理

一、搜索引擎工作原理  当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很多事情。  在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量...

基于Vue自定义上下轮播组件(原创)

基于Vue自定义上下轮播组件(原创)

当初拿到设计师设计的这个稿子,我也是花了好几天才写出来的这个轮播图效率极低,特此发表纪念一下,万一以后能用的到呢。效果:鼠标移入圆点,移动下一张图片。它也可以自动轮播。重点是右侧我标注的红框,它是固定...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信