前端学习--多益

问题1.到底link和@import有什么区别？
我们先来看看他们的定义

Quote link元素
HTML和XHTML都有一个结构，它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息（CSS）、导航助手、属于另外形式的信息（RSS）、联系信息等等。Quote @import
指定导入的外部样式表及目标设备类型。其实link和@import的最根本区别就是，link是一个html的一个标签，而@import是css的一个标签,
link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import就只能
调用css。如果单独从外部引用css来说，他们的作用是基本一样，只不过上面的老大不一样而已。：）

问题2.link和import到底那个更好？
只能说具体情况具体分析。
1）我要用javascript进行样式选择；
这个时候就要用link,因为link是html元素，可用javascript去控制dom元素最后达到改变样式的效果。

2）应用打印样式；
打印样式顾名思义就是打印页面时候的样式。
这个样式在普通浏览下是没有效果的，只有在打印的时候生效。
如果要为页面单独引用打印样式的话，link和@import都可以的。

3）引用多个样式；
如果要在一个页面上引用多个样式组合产生效果的话，link和@import也是都可以的。

大家似乎都是用的“通过使用百分比绝对定位,与外补丁负值的方法，负值的大小为其自身宽度高度的一半”达到让层垂直居中的效果。

看下面的代码：

    这样写必须固定浮动层的大小，才能用margin负值一半达到居中的效果，如果在让innerBox相对于一个父级层实现水平垂直居中，只需设置父级层的position:relative定位即可。

假设有个对象obj1，用on+event绑定事件如下：

obj1.onclick=function1;
obj1.onclick=function2;

这里的onclick是作为obj1的属性绑定事件，function1会被function2覆盖而只执行function2;

因此取消绑定事件只需:

obj1.onclick=null;

在支持W3C标准的浏览器中绑定事件用的是addEventListener:

obj1.addEventListener("click",change1,false);
obj1.addEventListener("click",change2,false);

事件执行顺序跟绑定顺序一样，先执行change1，再执行change2

事件取消绑定:

obj1.removeEventListener("click",change1,false);

另外在IE里面，绑定事件要用attachEvent绑定:

obj1.attachEvent("onclick",change1);
obj1.attachEvent("onclick",change2);

事件取消绑定：

obj1.detachEvent("onclick",change1);

绑定是事件名称同样要以on为前缀，而且没有后面是否冒泡的boolean值，但是这种执行顺序变了，前面那种方法是依次，这种就是倒序，先执行change2，再执行change1.

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

事件绑定

在JavaScript中，有三种常用的绑定事件的方法：

1. 在DOM元素中直接绑定；
   <input type="button"value="click me"onclick="hello()">
   
2. 在JavaScript代码中绑定；
   
   document.getElementById( "btn" ).onclick = function (){
     alert( "hello world!" );
   }
   在JavaScript代码中（即script标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。
   
3. 绑定事件监听函数。
   用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍，事件监听。
   

事件监听

关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。

起初Netscape制定了JavaScript的一套事件驱动机制（即事件捕获）。随即IE也推出了自己的一套事件驱动机制（即事件冒泡）。最后W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范。

W3C规范

语法：

element.addEventListener(event, function, useCapture)

event : （必需）事件名，支持所有 DOM事件 。

function：（必需）指定要事件触发时执行的函数。

useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。

注：IE8以下不支持。

IE标准

语法：

element.attachEvent(event, function)

event：（必需）事件类型。需加“on“，例如：onclick。

function：（必需）指定要事件触发时执行的函数。

事件监听的优点

1、可以绑定多个事件。常规的事件绑定只执行最后绑定的事件。
2、可以解除相应的绑定
btn5.removeEventListener("click",hello2);

事件委托

事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。

事件委托优点

1、提高JavaScript性能。

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
第一个参数是上下文，如果没有指定上下文则为全局对象；第二个参数是要传递的参数，call是参数序列，apply是包含参数的数组

在实际的项目中，我们通常都是用构造函数来创建一个对象，再将一些常用的方法添加到其原型对象上。最后要么直接实例化该对象，要么将它作为父类，再申明一个对象，继承该父类。

而在继承的时候有两种常用方式

jQuery on()方法是官方推荐的绑定事件的一个方法。

$(selector).on(event,childSelector,data,function,map)

.bind()：绑定事件处理函数的最基本方式是使用.bind()方法。它和live()方法一样，接受两个参数：

.bind(event type, event handler)

.live()：live方法和bind方法的唯一区别在于.live()不仅作用于DOM中当前存在的元素，还作用于将来可能存在（动态生成）的元素

delegate()方法：为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，
并规定当这些事件发生时运行的函数。从jQuery 1.7开始，.delegate()已经被.on()方法取代。
语法：

 $(selector).delegate(childSelector,event type,function)
参数说明：

childSelector 必需。规定要附加事件处理程序的一个或多个子元素。

event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

function 必需。规定当事件发生时运行的函数。

react   
是一个渲染视图的库 

React 提供了模板语法以及一些函数钩子用于基本的 HTML 渲染。