1、 阻止冒泡
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
// 设置的时候设为捕获
element.addEventListener(event, function, useCapture)
useCapture默认是false，冒泡阶段。
2、如何改变默认行为
preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。
元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
e.preventDefault ? e.preventDefault() : window.event.returnValue == false;
原生javascript的 return false只会阻止默认行为.
a.onclick = function(){
return false;
};
用jQuery的话则既阻止默认行为又防止对象冒泡。
$("#testC").on('click',function(){
return false;
});
什么元素有默认行为呢？
如链接<a>，总会跳到一个新页面，有时只是要执行js代码，并不用跳转，这时就要阻止默认行为。
提交按钮<input type=”submit”> 默认行为提交表单、radio(checkBox点击(选中)之后出现对勾，这是它的默认行为)等表单元素的默认事件 。
当Event 对象的cancelable为false时，表示没有默认行为,这时即使有默认行为，调用preventDefault也是不会起作用的。
//原生js阻止浏览器的默认行为
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault ) {
e.preventDefault();
}else{
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
}
举例
<a>消除默认事件的方法
<a href="http://www.baidu.com" onclick="clickEle(this)">使用stopPropagation！</a>
<a href=http://www.baidu.com" οnclick="alert(123);return false">使用return false！</a>
<a href="javascript:void(0);">void(0)使地址不发生跳转，不写void(0)也可以使返回为undefined！</a>
<a href="#">#会导致每次点击页面移到最顶部！</a>
function clickEle(e) {
if (e && e.preventDefault) {
console.log('阻止默认事件w3c');
e.preventDefault();
} else {
//我用谷歌浏览器执行的是这个，e.preventDefault是undefined？
console.log('阻止默认事件ie');
window.event.returnValue = false;
}
return false;
}
3、说说行内元素和块级元素
竟然是靠盒子模型来区分，就是设置上下margin，padding无效的就是行内元素。
块级元素对应于display:block. 行内元素对应于display:inline.
4、repaint和reflow什么时候发生
5、当浏览器页面变小时，会发生repaint和reflow吗？
如果写死了宽高就不会变化，如果没写死，整个页面就会发生repaint和reflow。
6、dom和bom区别
7、提高页面加载速度的办法
- 减小页面大小
页面的肥瘦是影响加载速度最重要的因素
- 去除不必要的空格、回车、注释。
- 将内联的 css 和 js 移到外部文件
- 页面压缩工具对页面进行压缩，比如：webpack集成的UglifyJS插件，uglifyJsPlugin会拖慢webpack的编译速度，所有建议在开发阶段将其关闭，部署的时候再将其打开。
- 减少文件数量
减少页面上引用的文件数量可以减少HTTP连接数。
许多JavaScript、CSS 文件可以合并最好合并成一个js 或者 css。
- 减少域名查询
DNS查询和解析域名也是消耗时间的，所以要减少对第三方JavaScript、
CSS、图片等资源的引用，不同域名的使用越少越好。
比如：
引用jqury的两种方式
1 下载代码文件至本地项目中，引入。
2 通过 CDN（内容分发网络） 引用它
其他的包最好用1方式下载，这样减少DNS解析域名的时间。
但jqury用使用CDN引用的一个好处：许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。
所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。
同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
- 缓存重用数据
对重复使用的数据进行缓存。
- 优化页面元素加载顺序
首先加载页面最初显示的内容和与之相关的JavaScript和CSS，然后加载HTML相关的东西，
像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载。
js放在body的最后面，减少减少inline JavaScript的数量，浏览器parser会假设
inline JavaScript会改变页面结构，所以使用inline JavaScript开销较大。
6、指定图像和table的大小
a. 如果浏览器可以立即决定图像或table的大小，那么它就可以马上显示页面而不要重新做一些布局安排的工作。
b. 这不仅加快了页面的显示，也预防了页面完成加载后布局的一些不当的改变。
c. image使用height和width。
8、获取鼠标位置
event.clientX / event.clientY
pc端使用mousedown,mousemove,mouseup监听实现。
移动端的方法是touchstart,touchmove,touchend。
移动端获取clientx：
event.changedTouches[0].clientX
获取位置总结
clientX / clientY : 触摸点相对于浏览器视口的位置，（不包含滚动距离）
pageX / pageY : 触摸点相对于页面的位置，（包含滚动距离）
screenX / screenY : 触摸点相对于屏幕的位置
JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
event中的几个属性：
clientX,clientY：鼠标相对于浏览器视口的x，y轴的位置
pageX / pageY： 鼠标相对于页面的x，y轴的位置，当页面没滚动时，pagexy和clientxy的值是相等的
screenX,screenY：鼠标相对于整个屏幕的x，y轴的位置
offsetX,offsetY：鼠标相对于事件源x轴的位置。
比如有个按钮，当你点击时，offsetX,offsetY获取的就是鼠标相对这个按钮的x坐标和y坐标
9、html分类
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<br>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
按是否闭合分划分：
闭合标签：
闭合标签是指由开始标签和结束标签组成的一对标签，
这种标签允许嵌套和承载内容，例如<html></html>、<p></p>等。
空标签：
空标签是指没有内容的标签，在开始标签中自动闭合。
常见的空标签有：<br>、<hr>、 <img>、 <input>、 <link> <meta>。
块级元素和行内元素的区别？
1.inline元素设置width，height属性无效
2.inline元素的padding和margin可以设置，
但是padding，margin-right，margin-left都产生了效果，
而垂直方向的margin-bottom，margin-top是没有效果的
（亲测padding-top和padding-bootom是有用的
inline-block：结合了块级元素和行内元素的特性，块级元素排在一行）
扫一扫
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
