Question: I have the following code: 

```
if(text && spot && box) {
    document.getElementById('text-shadow-box').onmousemove = onMouseMove;

    document.getElementById('text-shadow-box').ontouchmove = function(e) {
        e.preventDefault();
        e.stopPropagation();

        onMouseMove({
            clientX: e.touches[0].clientX,
            clientY: e.touches[0].clientY
        });
    };
}

```

What does `onmousemove = onMouseMove` and why is it not assigned at the beginning? My other question: What does e mean in the context function(e) and `e.touches[0].clientx`?

Answer: 
I will comment the code inline:

```
//all variables ext,spot,box are defined, not "false" and not 0 and not null
if (ext && spot && box) {
/* We assign onmousemove event handler to the function, in javascript functions are vars
* function declared like `function function_name(param) {}` go to global scope, 
* and almost equal to 'function_name=function(param ) {}'
* var local scope use `var function_name=function(param) {}`
*/
            document.getElementById('text-shadow-box').onmousemove = onMouseMove;
/* add here is another example, you attach ontouchmove anonymous function,
* anonymous function BEGIN NEXT LINE */  
            document.getElementById('text-shadow-box').ontouchmove = function (e) {
 // e here it is event object, which passed to handler function as argument
 //it is jquery call, mean do not start other event handlers after this line
                e.preventDefault(); e.stopPropagation(); 
/* call function inMousemove, declared somewhere else
            The "{
                clientX: e.touches[0].clientX,
                clientY: e.touches[0].clientY
            }" here is object having two properties - clientX and clientY */
                onMouseMove({
                    clientX: e.touches[0].clientX,
                    clientY: e.touches[0].clientY
                });
/* anonymous function END NEXT LINE */
            };

```

---

ontouchmove and other touchscreen events documnted [here](https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html) 
it looks that ***touches*** is object which handles touches to screen, as i have no touchscreen device i can't check, but it looks like touched elements can be accessed two ways, 1st - using `e.touches.item(n)` (as described in doc) and second - when using e.touches as array `e.touches[n]`. The n==0 means 1st touched element as i understand from w3c specs.

---

event.stopPropagation() 

> 
> Description: Prevents the event from bubbling up the DOM tree,
>  preventing any parent handlers from being notified of the event.
> 
> 
> 

event.preventDefault()

> 
> Description: If this method is called, the default action of the event
>  will not be triggered.
> 
> 
> 

So `event.stopPropagation()` prevent of any parents of that element to receive that event (say you have two folded divs and both have event listener)

While `event.preventDefault()` prevents default action (say you have `<a href="test.html"></a>` and have onclick event handler, so it is good to prevent action which will make browser to load test.html
onmousemove = onMouseMove is for HTML DOM event registration. in this case, it means method 'onMouseMove' should be invoked when there is a mouse move event on HTML element 'text-shadow-box'. 

ontouchmove is another event that listens to any touch move, this happens on mobile clients (e.g. Android client). inside the event handler it uses the onMouseMove to handle this event by converting the touch point to client coordinate.