JavaScript教程

首页>前端教程>JavaScript教程

点击空白处隐藏某个元素最好的方法不是阻止冒泡

显示隐藏类的弹出面板,一般都有一个需求,在面板本身上点击的时候,面板不隐藏,在除面板之外的其它区域点击,要隐藏这个面板。以前常常用点击面板的时候阻止这个事件的冒泡,然后再在document上委托这个关闭面板的点击事件。比如这样的结构:<div class="wrapper&...

面向对象(构造函数、原型、实例、原型链的关系)

对于这个以前面试必考的八股文,在网上有很多批判的声音,很多人说写代码的时候用不到这些,不过我觉得理解了这些概念后对于写代码,特别是理解面向对象编程的思想,还有JavaScript独特的原型这个概念还是非常有帮助的。所以,对于前端来说,这些概念是必背的。1、创建对象1.1 直接创建单个对象 ...

正则这个火星文!!!

每次学了正则没多久就忘了,大部分时候写复杂一点的正则还是依靠插件或者百度。1、正则表达式1.1、什么是正则表达式正则表达式是一种字符串匹配模式。因为匹配模式语法规则复杂,所以戏称为火星文。在 JavaScript中,正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法,...

DOM基础10:两个矩形的碰撞

学习了拖拽后,那么碰撞就是拖拽一个对象去碰另一个对象,检测是否碰上了。这里的碰撞是两个矩形对象的碰撞,如果是圆形或者不规则形状,方法又不一样了。这个小案例是拖动老鼠去碰撞灯,老鼠只能在可视区内移动,碰上了灯,灯变亮了。具体效果点击查看知识点:1、利用getBoundingClientRect( )方...

DOM基础9:拖拽原理

HTML5现在已经有了拖放的API,也就是说拖放已经成为了HTML5的标准,不过还是先了解一下JavaScript最原始的拖拽原理。一、拖拽的基本原理拖拽是基于三个事件触发的:onmousedown : 选择元素onmousemove : 移动元素onmouseup   : 释放元素oDi...

DOM基础8:事件冒泡和事件捕获

一、事件流当浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是一组圆。两家公司的开发团队在看待浏览器事件方面还是一致...

DOM基础7:事件绑定的第二种方式addEventListener

以前都是直接为对象绑定一个事件处理函数,但是这种方法会导致事件的覆盖。//给一个对象绑定一个事件处理函数的第一种形式 //obj.onclick = fn; function fn1() {     ale...

DOM基础6:event.stopPropagation与event.preventDefault的区别和兼容性

event : 事件对象 , 当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供我们在需要的时候调用。这个有点像飞机的黑匣子。事件对象必须在一个事件调用的函数里面使用才有内容。事件函数:事件调用的函数,一个函数是不是事件函数,不在定...

DOM基础5:Event事件对象

基于事件的响应,让页面和用户之间产生交互行为是JavaScript的一大特征。比如,当下面的事件发生的时候,就产生了一个JavaScript事件。当用户单击鼠标时当网页已加载时当图像被加载时当鼠标移动到元素上时当输入字段更改时提交HTML表单时当用户敲击一个键时HTML DOM事件允许JavaScr...

DOM基础4:对CSS样式的操作

查找到html元素之后,很大一部分操作都需要修改元素的css样式。一般操作CSS样式的方法有如下几种:一、style对象element.style.properties这个style对象的属性是可读可写的,只是它只能读取和设置元素对象的行间样式表。比如:element.style.color=&qu...
Top